/* INTECHI visual language, see docs/DESIGN-PRO-CRM.md. Colours of an organization come from --accent and --brand set on <html>. */
:root {
  --brand: #2f86ee;
  --accent: #1c6bc7;
  --menu: color-mix(in srgb, var(--brand) 14%, #fff);
  --bg: #f4f5f2;
  --ink: #15201b;
  --muted: #5a6b7a;
  --line: #dde1da;
  --card: #fff;
  --warn: #b3261e;
  --soft: #f6f7f4;
  --soft2: #eef0ec;
  --grid: #e6e8e3;
  --focus: #f59331;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --mark-other: #a9b0aa;
  --shadow: 0 1px 2px rgba(21, 32, 27, 0.06), 0 8px 20px -10px rgba(21, 32, 27, 0.22);
  --shadow-hover: 0 2px 4px rgba(21, 32, 27, 0.08), 0 14px 28px -10px rgba(21, 32, 27, 0.3);
}
html[data-theme='dark'] {
  color-scheme: dark;
  --menu: color-mix(in srgb, var(--brand) 24%, #0e1311);
  --bg: #0e1311;
  --card: #18201c;
  --ink: #e7ede9;
  --muted: #9daba4;
  --line: #2b3731;
  --soft: #202a25;
  --soft2: #27332d;
  --grid: #2b3731;
  --warn: #ff8a80;
  --link: color-mix(in srgb, var(--accent) 42%, #fff);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
}
a {
  color: var(--link, var(--accent));
}
input,
select,
textarea {
  color: var(--ink);
}
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* layout: menu 248 px on the left, content on the right */
.shell {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
}
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  width: 248px;
  flex: none;
  background: var(--menu);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* the inside of the menu: no box of its own (the crystal look makes it the part that scrolls, so that its bar can sit beside the panel) */
.side-scroll {
  display: contents;
}
.logo-pill {
  padding: 6px 4px;
}
.brand-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}
html[data-theme='dark'] .brand-name {
  color: var(--link, var(--accent));
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  padding: 0 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}
.nav a:hover {
  background: rgba(21, 32, 27, 0.08);
}
.nav a.on {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
  font-weight: 800;
}
.nav a.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
}
html[data-theme='dark'] .nav a.on {
  color: var(--link, var(--accent));
}
.userbox {
  margin-top: auto;
  font-size: 13px;
  color: var(--muted);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
/* the name on its own line, under it the role (a green pill) and the sign-out button, like in Finance */
.userbox .who {
  display: contents;
}
.userbox .who-name {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.userbox .who-role {
  grid-column: 1;
  justify-self: start;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.userbox form {
  grid-column: 2;
}
html[data-theme='dark'] .badge.good {
  background: #1e3a2e;
  color: #8fd6b4;
}
.main {
  flex: 1;
  min-width: 0;
  padding: 20px 28px 48px;
}
/* the bar at the top (as in Finance): no heading of the page, only the search and the tools; the heading is there for a screen reader */
.top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.main > h1.sr + .top {
  margin-top: 0;
}
.tools,
.langs {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.main > * + * {
  margin-top: 16px;
}
.main > .top {
  margin-top: 0;
}

/* components */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.card p {
  margin: 0;
  color: var(--muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.btn:hover {
  filter: brightness(1.1);
}
.btn.secondary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.danger {
  background: var(--warn);
}
.btn.sm {
  min-height: 34px;
  padding: 0 12px;
}
.chip {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 600;
  background: var(--soft2);
  color: #4c5a55;
}
.badge.good {
  background: #ddefe6;
  color: #0a4d3f;
}
.badge.warn {
  background: #fcefd3;
  color: #7a4b00;
}
.badge.bad {
  background: #f8dcdc;
  color: #8a1c1c;
}
input,
select,
textarea {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  background: var(--card);
  font-family: inherit;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
th.num,
td.num,
th.date,
td.date {
  text-align: center;
}
td.num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* sign-in: a frosted glass card on a soft ground, the same in the light and in the dark mode (the mode is the one chosen inside the application:
   data-theme, set before the page is painted from what the browser remembers, else from the system). Light: a white card on a pale ground with a
   cool blue light (no yellow); dark: a deep blue ground with the amber and blue light. Rounded fields and buttons, the network behind.
   The title, the texts and the emblems of the firms are in the middle. The same page as in INTECHI FINANCE. */
.login {
  --lg-bg:
    radial-gradient(900px 640px at 86% -8%, rgba(150, 190, 240, 0.38), transparent 62%),
    radial-gradient(760px 600px at 4% 96%, rgba(118, 160, 214, 0.5), transparent 64%),
    radial-gradient(700px 520px at 46% 46%, rgba(255, 255, 255, 0.75), transparent 72%), #eceff4;
  --lg-card: rgba(255, 255, 255, 0.66);
  --lg-border: rgba(255, 255, 255, 0.95);
  --lg-ink: #121b26;
  --lg-muted: #4d5d70;
  --lg-field: rgba(255, 255, 255, 0.8);
  --lg-field-border: rgba(31, 46, 74, 0.18);
  --lg-shadow: 0 24px 70px rgba(31, 46, 74, 0.2);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--lg-bg);
  color: var(--lg-ink);
}
html[data-theme='dark'] .login {
  --lg-bg:
    radial-gradient(900px 640px at 84% -6%, rgba(232, 168, 50, 0.3), transparent 62%),
    radial-gradient(800px 640px at 2% 98%, rgba(48, 98, 214, 0.45), transparent 64%),
    radial-gradient(680px 520px at 52% 42%, rgba(110, 80, 200, 0.22), transparent 70%), #080d18;
  --lg-card: rgba(255, 255, 255, 0.08);
  --lg-border: rgba(255, 255, 255, 0.2);
  --lg-ink: #eef3fb;
  --lg-muted: #aebdd0;
  --lg-field: rgba(255, 255, 255, 0.08);
  --lg-field-border: rgba(255, 255, 255, 0.22);
  --lg-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.login canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.login .in {
  position: relative;
  min-height: 100vh;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.login .headrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.login .headrow > img {
  width: 150px;
  height: auto;
}
.login .pill {
  font-size: 13px;
  font-weight: 600;
  color: #1c6bc7;
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 12px;
  border-radius: 20px;
}
.login .center {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login .foot {
  font-size: 13px;
  color: var(--lg-muted);
}
.lcard {
  width: 100%;
  max-width: 420px;
  background: var(--lg-card);
  color: var(--lg-ink);
  border: 1px solid var(--lg-border);
  border-radius: 32px;
  padding: 44px 36px 34px;
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lcard {
    background: rgba(255, 255, 255, 0.92);
  }
  html[data-theme='dark'] .lcard {
    background: rgba(20, 28, 46, 0.94);
  }
}
.lcard h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-align: center;
}
.lcard p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: var(--lg-muted);
}
.lcard p b {
  color: var(--lg-ink);
}
.lcard .emb {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.lcard .emb img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.lcard .invited {
  font-size: 13px;
  text-align: center;
  color: var(--lg-muted);
}
.lcard a.ms,
.lcard a.ms:hover {
  color: #fff;
}
.lcard a.ms {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3f93f2, #7b84f4);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    0 12px 30px rgba(79, 128, 245, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition:
    filter 0.15s,
    transform 0.15s;
}
.lcard a.ms:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.lcard a.ms:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 3px;
}
.lcard .dev {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 24px;
  background: var(--lg-field);
  border: 1px solid var(--lg-field-border);
  font-size: 13px;
  color: var(--lg-muted);
}
.lcard .dev b {
  color: var(--lg-ink);
  font-size: 14px;
}
.lcard .dev button {
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid var(--lg-field-border);
  background: var(--lg-field);
  color: var(--lg-ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
.lcard .dev button:hover {
  background: color-mix(in srgb, var(--lg-field) 60%, #7b84f4 28%);
  border-color: #7b84f4;
  transform: translateY(-1px);
}
.lcard .dev button:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .lcard {
    padding: 34px 24px 26px;
    border-radius: 28px;
  }
  .lcard h1 {
    font-size: 30px;
  }
}

/* phone (as in Finance): one bar with the logo, the circles of the companies and the button Menu; the menu opens under it in two columns */
.side-menu {
  display: contents;
}
.menu-toggle {
  display: none;
}
.nav-sep {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  margin: 8px 10px;
  width: auto;
}
@media (max-width: 860px) {
  .shell {
    flex-direction: column;
  }
  .side {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 12px;
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 10px 16px;
  }
  .side-head .logo-pill {
    padding: 0;
  }
  .side .logo-pill img.logo {
    width: 84px;
    max-width: 84px;
    height: auto;
  }
  .side .companies {
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .side .companies a.co {
    border-width: 2px;
  }
  .side .companies img {
    width: 32px;
    height: 32px;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    background: color-mix(in srgb, var(--card) 55%, transparent);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
  }
  .menu-toggle:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  .side-menu {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 10px;
  }
  .side.open .side-menu {
    display: flex;
  }
  .side-menu .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    width: 100%;
  }
  .side-menu .nav a {
    padding: 0 10px;
    font-size: 13.5px;
    line-height: 1.25;
  }
  .nav-sep {
    display: none;
  }
  .side-menu .nav-help {
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    padding-top: 8px;
    margin: 0;
  }
  .side-menu .userbox {
    margin: 0;
    width: 100%;
    padding-top: 10px;
  }
  .main {
    width: 100%;
    padding: 16px;
  }
}
@media (max-width: 640px) {
  .main {
    overflow-x: hidden;
  }
  .card {
    overflow-x: auto;
  }
  /* a table becomes a list of small cards: "label : value" on every line */
  table.cards,
  table.cards tbody,
  table.cards tr,
  table.cards td {
    display: block;
    width: 100%;
  }
  table.cards thead {
    display: none;
  }
  table.cards tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  table.cards td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
    border: 0;
    overflow-wrap: anywhere;
  }
  table.cards td::before {
    content: attr(data-label);
    color: var(--muted);
    text-align: left;
    flex: none;
    white-space: nowrap;
  }
  /* the first cell (the name, the date) is the heading of the card: no label, the badge beside it stays on one line */
  table.cards td:first-child {
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    font-weight: 700;
  }
  table.cards td:first-child::before {
    display: none;
  }
  table.cards td:empty {
    display: none;
  }
}

/* the globe that switches the language (as on intechi.tech): hover on a computer, tap on a phone */
.dd {
  position: relative;
  display: flex;
}
.dd > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.dd > button svg {
  width: 18px;
  height: auto;
  fill: currentColor;
}
.dd:hover > button,
.dd > button:focus-visible {
  color: var(--accent);
}
.dd ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: max-content;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.2s 0.15s,
    transform 0.2s 0.15s;
  box-shadow: 0 12px 40px rgba(21, 32, 27, 0.18);
  z-index: 20;
}
.dd:hover ul,
.dd.open ul {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(6px);
  transition-delay: 0s;
}
.dd li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
.dd li a:hover {
  color: var(--accent);
}
.dd li img {
  width: 18px;
}
.dd ul::before {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: -14px;
  height: 14px;
}
html[data-theme='dark'] .dd ul {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.login .dd > button {
  color: #15201b;
}
html[data-theme='dark'] .login .dd > button {
  color: var(--ink);
}

/* the companies of the group: circles with the logos at the top of the menu (the active one has an orange ring) */
.companies {
  display: flex;
  gap: 8px;
}
.companies a.co {
  display: block;
  border-radius: 50%;
  border: 3px solid transparent;
  line-height: 0;
}
.companies a.co.on {
  border-color: var(--focus);
}
.companies img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.nav.nav-help {
  margin-top: 4px;
}

/* notices, toolbars and the lists of the pages of data */
.notice {
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--card);
}
.notice.good {
  background: #ddefe6;
  color: #0a4d3f;
  border-color: #b6dcc9;
}
.notice.bad {
  background: #f8dcdc;
  color: #8a1c1c;
  border-color: #eab6b6;
}
html[data-theme='dark'] .notice.good {
  background: #12362b;
  color: #bfe8d6;
  border-color: #1f5846;
}
html[data-theme='dark'] .notice.bad {
  background: #3b1a1a;
  color: #ffc9c4;
  border-color: #6b2b2b;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.toolbar .chips,
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  text-decoration: none;
}
.search {
  display: flex;
  gap: 8px;
  margin: 0;
}
.search input {
  min-width: 220px;
}
.adds {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tablewrap {
  overflow-x: auto;
}
.empty {
  color: var(--muted);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
td.act,
th.act {
  text-align: right;
  white-space: nowrap;
}
td.act > * {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
}
td.act form {
  margin: 0;
}
tr.undone td {
  opacity: 0.55;
}
.changes {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
}
.pager {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* the form of a contact */
.cform {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cform .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  font-size: 13px;
}
.f.wide {
  grid-column: 1 / -1;
}
.f.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.f textarea {
  padding: 10px 12px;
  min-height: 80px;
}
.withbtn {
  display: flex;
  gap: 8px;
}
.withbtn input {
  flex: 1;
  min-width: 0;
}
.hint,
.note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  font-weight: 400;
}
.formbtns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* big and small (icon) buttons in a row sit on one axis */
  align-items: center;
}

/* the tiles of the administration and the state of the backup */
a.tile {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.tile p {
  margin: 6px 0 0;
  color: var(--muted);
}
.tile.good {
  border-left: 4px solid #1baf7a;
}
.tile.warn {
  border-left: 4px solid #eda100;
}
.tile.soon {
  opacity: 0.6;
}
.goodline {
  color: #0a4d3f;
  font-weight: 700;
}
.warnline {
  color: #7a4b00;
  font-weight: 700;
}
html[data-theme='dark'] .goodline {
  color: #8fe0bd;
}
html[data-theme='dark'] .warnline {
  color: #ffd37a;
}
.backup-status.ok {
  color: #0a4d3f;
  font-weight: 700;
}
.backup-status.err {
  color: var(--warn);
  font-weight: 700;
}
html[data-theme='dark'] .backup-status.ok {
  color: #8fe0bd;
}

/* the help */
.help-topic summary {
  cursor: pointer;
}
.help-topic p {
  color: var(--muted);
  margin: 8px 0 0;
}
.help-search input {
  width: 100%;
}

@media (max-width: 640px) {
  .search {
    width: 100%;
  }
  .search input {
    flex: 1;
    min-width: 0;
  }
  table.cards td.act {
    justify-content: flex-end;
  }
}

/* the map of relations between contacts: a canvas with a dot grid, cards joined by curves */
.map-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.map-tools p {
  margin: 0;
}
.map-buttons {
  display: flex;
  gap: 6px;
}
.map {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--soft);
  background-image: radial-gradient(var(--grid) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  touch-action: none;
  cursor: grab;
}
.map svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  max-height: 70vh;
}
.map .edge {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 55%, var(--muted));
  stroke-width: 2;
}
.map .port {
  fill: var(--card);
  stroke: #1baf7a;
  stroke-width: 2.5;
}
.map .node rect {
  fill: var(--card);
  stroke: var(--line);
  stroke-width: 1.5;
}
.map .node.company rect {
  stroke: var(--accent);
  stroke-width: 2;
}
.map a:hover .node rect,
.map a:focus-visible .node rect {
  stroke: var(--focus);
  stroke-width: 2.5;
}
.map .node .badge {
  fill: color-mix(in srgb, var(--accent) 16%, var(--card));
}
.map .node .icon {
  color: var(--accent);
}
.map .node .title {
  font:
    700 14px Manrope,
    system-ui,
    sans-serif;
  fill: var(--ink);
}
.map .node .sub {
  font:
    500 12px Manrope,
    system-ui,
    sans-serif;
  fill: var(--muted);
}
.map a {
  text-decoration: none;
  outline: none;
}
.card > * + * {
  margin-top: 12px;
}
.card > .toolbar + *,
.card > h2 + * {
  margin-top: 12px;
}

/* the top bar as in INTECHI FINANCE: a search pill, the size of the page, the light/dark switch and the globe */
.top-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.top-search {
  margin: 0;
}
@media (min-width: 861px) {
  .top-tools {
    flex: 1 1 400px;
  }
  .top-search {
    flex: 1 1 auto;
    max-width: 520px;
    margin-left: auto;
  }
  .top-search .filter-input {
    width: 100%;
  }
}
.filter-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 0 14px;
  min-height: 40px;
  background: var(--card);
  color: var(--muted);
  width: min(320px, 60vw);
}
.filter-input:focus-within {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.filter-input input {
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  min-height: 0;
}
.theme-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--accent);
}
.theme-toggle .sun {
  display: none;
}
html[data-theme='dark'] .theme-toggle .sun {
  display: block;
}
html[data-theme='dark'] .theme-toggle .moon {
  display: none;
}
.zdd {
  position: relative;
  display: flex;
}
.zdd > .zbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.zdd > .zbtn:hover,
.zdd > .zbtn:focus-visible,
.zdd.open > .zbtn {
  color: var(--accent);
  border-color: var(--line);
}
.zdd.changed > .zbtn {
  border-color: var(--line);
  background: var(--card);
}
.zdd ul {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: max-content;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 12px 40px rgba(21, 32, 27, 0.18);
  z-index: 20;
}
.zdd.open ul {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(6px);
}
.zdd li button {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 8px 18px;
  background: none;
  border: 0;
  text-align: left;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.zdd li button:hover,
.zdd li button:focus-visible {
  color: var(--accent);
  background: var(--soft2);
}
@media (max-width: 860px) {
  .top-tools {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
  }
  .top-search {
    flex: 1;
    min-width: 0;
  }
  .filter-input {
    width: 100%;
  }
  .top-tools .zdd {
    display: none;
  }
}

/* the logo is a link back to the home page */
.logo-pill {
  display: block;
  padding: 6px 4px;
  line-height: 0;
  border-radius: 8px;
  text-decoration: none;
}
.logo-pill:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.logo-pill img.logo {
  width: 100%;
  max-width: 150px;
  height: auto;
}
.logo-pill.small img.logo {
  max-width: 110px;
}

/* the home page: a dark 3D map of the relations with the numbers beside it (in the colours of the chosen company) */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* the map of relations: light flows along the lines, the cards can be moved */
.map .edge {
  stroke-dasharray: 6 8;
  animation: flow 1.4s linear infinite;
}
@keyframes flow {
  to {
    stroke-dashoffset: -14;
  }
}
.map .particle {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--accent));
  pointer-events: none;
}
.map .node {
  cursor: grab;
}
.map .node.dragging {
  cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
  .map .edge {
    animation: none;
    stroke-dasharray: none;
  }
}

/* the hamburger: on a desktop it folds the menu to a narrow bar of icons (and unfolds it again) */
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.side-hide {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  opacity: 0.75;
  cursor: pointer;
  padding: 0;
}
.side-hide:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.nav a {
  gap: 12px;
}
.nav-ico {
  flex: none;
  color: var(--muted);
}
.nav a.on .nav-ico {
  color: var(--accent);
}
html[data-theme='dark'] .nav a.on .nav-ico {
  color: var(--link, var(--accent));
}
.nav a:hover:not(.on) .nav-ico {
  color: var(--ink);
}
@media (min-width: 861px) {
  .side-hide {
    display: inline-flex;
  }
  html.side-off .side {
    width: 76px;
    padding: 14px 8px;
    gap: 14px;
    align-items: center;
  }
  html.side-off .side-head {
    flex-direction: column;
    gap: 10px;
  }
  html.side-off .side-head .logo-pill {
    display: none;
  }
  html.side-off .companies {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  html.side-off .companies img {
    width: 36px;
    height: 36px;
  }
  html.side-off .nav {
    width: 100%;
  }
  html.side-off .nav a {
    justify-content: center;
    padding: 0;
    gap: 0;
  }
  html.side-off .nav a > span:not(.nav-badge) {
    display: none;
  }
  html.side-off .nav a.on::before {
    left: -8px;
  }
  html.side-off .userbox {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html.side-off .userbox .who {
    display: none;
  }
  html.side-off .userbox .chip {
    padding: 0 6px;
    font-size: 11px;
  }
}

/* the name of an icon in the narrow bar (made by public/js/menu.js, beside the icon) */
.rail-tip {
  position: fixed;
  z-index: 80;
  transform: translateY(-50%);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1b1f23;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* the hand: grab the page and move it (inside the application only), switched on by the round button or the space bar */
body.hand-on main {
  cursor: grab;
}
body.hand-on main {
  user-select: none;
  -webkit-user-select: none;
}
body.hand-on.hand-grab,
body.hand-on.hand-grab * {
  cursor: grabbing !important;
  user-select: none;
}
.hand-btn {
  position: fixed;
  right: 31px;
  bottom: 76px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 50;
  padding: 0;
}
.hand-btn.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.hand-btn:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 2px;
}
@media (max-width: 860px) {
  .hand-btn {
    display: none;
  }
}

/* the administration of the people and the roles */
.user-card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  cursor: pointer;
  min-height: 44px;
  list-style: none;
}
.user-card > summary::-webkit-details-marker {
  display: none;
}
.user-card > summary::before {
  content: '▸';
  color: var(--muted);
  width: 14px;
}
.user-card[open] > summary::before {
  content: '▾';
}
.user-card .muted,
.role-head .muted {
  color: var(--muted);
}
.badge.muted {
  background: var(--soft2);
  color: var(--muted);
}
.user-body {
  display: grid;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.user-body h3,
.role-head b {
  margin: 0 0 8px;
  font-size: 15px;
}
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
  margin: 10px 0;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}
.tpl-text {
  width: 100%;
  margin-top: 10px;
  font: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  resize: vertical;
}
.tiles.roles {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
}
.role-card .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip.sm {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.role-card details {
  margin-top: 10px;
}
.role-card summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
}
#new-user > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 16px;
}
#new-user[open] > summary {
  margin-bottom: 12px;
}

/* Johny, the helper: the round icon at the bottom right (above the hand), the chat panel it opens, and his page */
.johny-btn {
  position: fixed;
  right: 24px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: #0b1b3a;
  border: 2px solid var(--card);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  z-index: 50;
  padding: 0;
  cursor: pointer;
}
.johny-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.johny-btn:hover {
  transform: scale(1.06);
}
.hand-btn {
  bottom: 84px;
}
@media (max-width: 860px) {
  .johny-btn {
    right: 14px;
    bottom: 14px;
  }
  body:has(.side.open) .johny-btn {
    display: none;
  }
}
.johny-chat {
  position: fixed;
  right: 24px;
  bottom: 80px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(560px, 70vh);
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
  z-index: 60;
  overflow: hidden;
}
.johny-chat[hidden] {
  display: none;
}
.johny-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.johny-chat-head img {
  border-radius: 50%;
}
.johny-chat-head a {
  margin-left: auto;
  font-size: 13px;
}
.johny-chat-x {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  min-width: 44px;
  min-height: 44px;
}
.johny-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.johny-msg {
  max-width: 86%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.johny-msg.johny {
  align-self: flex-start;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.johny-msg.me {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}
.johny-msg.err {
  align-self: flex-start;
  background: #fcefd3;
  color: #5e3a00;
}
.johny-chat-note {
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--muted);
}
.johny-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  align-items: center;
}
.johny-chat-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 160px;
  resize: vertical;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
}
.johny-send {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
  cursor: pointer;
}
.johny-send svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
@media (max-width: 860px) {
  .johny-chat {
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    bottom: 72px;
    height: min(70dvh, 520px);
  }
  .johny-chat.typing .johny-chat-note {
    display: none;
  }
}
.johny-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.johny-ico {
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}
.johny-head p {
  margin: 6px 0 0;
}
.johny-abilities .check.ability {
  align-items: flex-start;
  padding: 6px 0;
}
.johny-abilities .check.ability input {
  margin-top: 3px;
}
.johny-abilities .check.soon {
  opacity: 0.6;
}
.johny-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.johny-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}
.johny-list .muted,
.johny-areas-list .muted {
  color: var(--muted);
  font-size: 13px;
}
.johny-upload {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.johny-areas {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.johny-areas > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 44px;
}
.johny-areas > summary::-webkit-details-marker {
  display: none;
}
.johny-areas > summary::before {
  content: '▸';
  color: var(--accent);
  font-size: 13px;
}
.johny-areas[open] > summary::before {
  content: '▾';
}
.johny-areas > summary:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 3px;
  border-radius: 6px;
}
.johny-areas-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.johny-areas-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.johny-area-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.johny-area-name .muted {
  font-size: 12.5px;
}
.johny-area-state {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
}
.johny-area-state .muted {
  min-width: 62px;
  text-align: right;
}
@media (max-width: 520px) {
  .johny-areas-list li {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .johny-area-state .muted {
    min-width: 0;
    text-align: left;
  }
}

/* the home page: the companies of the group, the grid of the cards, the activity and the contacts worth finishing */
.co-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.co-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  border-left: 4px solid var(--co, var(--accent));
}
.co-tile img {
  border-radius: 50%;
  flex: none;
}
.co-tile > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.co-tile small {
  color: var(--muted);
}
.co-tile.on {
  border-color: var(--co, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--co, var(--accent)) 35%, transparent);
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.needs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.recent-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.btn-ico {
  border-radius: 50%;
  margin-right: 8px;
}

/* the home page as in Finance: the tiles of the numbers, the card of the map (a dark canvas inside a normal card) */
.kpi-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) {
  .kpi-row.n5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1000px) {
  .kpi-row.n5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
.kpi-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-shadow: var(--shadow);
}
.kpi-tile small {
  color: var(--muted);
  font-size: 13px;
}
.kpi-tile b {
  font-size: 22px;
  font-weight: 600;
}
.map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.map-head .muted {
  color: var(--muted);
}
.map-canvas {
  width: 100%;
  height: 400px;
  display: block;
  touch-action: none;
  border-radius: 12px;
  margin-top: 12px;
  background: #0a1324;
}
@media (max-width: 860px) {
  .map-canvas {
    height: 300px;
  }
}

/* a file field: the native button becomes a chip, the name of the file sits beside it */
input[type='file'] {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  width: 100%;
}
input[type='file']::file-selector-button {
  min-height: 32px;
  padding: 0 14px;
  margin-right: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* a field for a file in the language of the page (public/js/filepick.js): the browser writes its own words ("Choose File") in the language of the
   system, so its field is hidden and a button and the name of the file stand in its place */
.fp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--soft);
  cursor: pointer;
}
.fp-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
.fp-btn {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.fp-btn:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 2px;
}
.fp-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}
.fp.has .fp-name {
  color: var(--ink);
}

/* the administration as in Finance: a strip of small tiles on top, then the horizontal rows (a row = a line, not a square) */
.adm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.adm-tiles .tile {
  padding: 12px 16px;
}
.adm-tiles .tile p {
  margin: 4px 0 0;
  font-size: 13px;
}
.adm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adm-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}
.adm-row .adm-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-row .adm-sub {
  color: var(--muted);
}
.adm-row .adm-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  max-width: 70ch;
}
.adm-row .formbtns {
  flex: none;
  margin: 0;
}
.adm-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1baf7a;
}
.adm-row.warn .adm-dot {
  background: #e5484d;
}
.adm-row.warn .adm-sub {
  color: var(--warn);
  font-weight: 600;
}
.adm-row.role-card {
  flex-wrap: wrap;
  align-items: flex-start;
}
.adm-row.role-card .role-head {
  flex: 0 0 240px;
  margin: 0;
}
.adm-row.role-card .chips {
  flex: 1 1 260px;
}
.adm-row.role-card details,
.adm-row.role-card > .hint {
  flex: 1 1 100%;
  margin: 0;
}
@media (max-width: 860px) {
  .adm-row {
    flex-wrap: wrap;
  }
  .adm-row .formbtns {
    width: 100%;
  }
  .adm-row.role-card .role-head {
    flex-basis: 100%;
  }
}
html.side-off .nav-sep {
  margin: 4px 0;
}

/* a badge never breaks in two; in the dark theme the plain badge (Firma, Osoba) is a light pill, not dark on dark */
.badge {
  white-space: nowrap;
}
html[data-theme='dark'] .badge:not(.good):not(.warn):not(.bad):not(.muted) {
  background: var(--soft2);
  color: #c4d0ca;
}
/* the explanation under the tabs of the administration */
.admin-tabs + .hint {
  margin: 12px 0;
}

@media (max-width: 860px) {
  /* a cell with nothing in it (an audit row without details) gets no label either */
  table.cards td.nodetail {
    display: none;
  }
}

/* the page of the backup: the cards are stacks with room between their parts (the button is not glued to the text above it) */
.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stack > * {
  margin-top: 0;
  margin-bottom: 0;
}
.backup {
  gap: 16px;
}
.backup-run {
  align-items: center;
  gap: 12px;
}
.backup-status {
  margin: 0;
}
ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
ul.runs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
ol.guide {
  padding-left: 20px;
  margin: 10px 0 0;
  gap: 10px;
}
.fold > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

/* the checklist of the backup: a round mark and the text on one line; the fields of the form sit on one line even when a label has two */
ul.checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
}
ul.checklist .badge {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  justify-content: center;
}
.backup .cols {
  align-items: end;
}

/* the hint under the map and the row of the companies get room, so nothing sticks to the frame */
.map-card .hint {
  margin: 14px 4px 4px;
}
.map-card {
  margin-bottom: 18px;
}
.co-tiles {
  margin-bottom: 18px;
}

/* back to the top: the round arrow above the hand, in the colour of the company, shown once the page is scrolled */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 128px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 50;
  transition:
    transform 0.15s,
    filter 0.15s;
}
.to-top[hidden] {
  display: none;
}
.to-top:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.to-top:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 3px;
}
@media (max-width: 860px) {
  .to-top {
    right: 14px;
    bottom: 72px;
  }
  body:has(.side.open) .to-top {
    display: none;
  }
}
@media print {
  .to-top {
    display: none !important;
  }
}

/* a card of the administration that folds (as in Finance): the heading is the summary, an arrow in the colour of the accent */
details.fold > summary {
  list-style: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
details.fold > summary::-webkit-details-marker {
  display: none;
}
details.fold > summary::before {
  content: '▸';
  color: var(--accent);
  font-size: 15px;
}
details.fold[open] > summary::before {
  content: '▾';
}
details.fold > summary:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 4px;
  border-radius: 6px;
}
details.fold[open] > summary {
  margin-bottom: 12px;
}
details.card.fold > .stack {
  gap: 12px;
}
html[data-theme='dark'] details.fold > summary::before {
  color: var(--link, var(--accent));
}
details.card.fold > :not(summary) ~ :not(summary) {
  margin-top: 12px;
}

/* the buttons of one kind have one colour all over the app (as in Finance): delete red, edit green, done teal, back amber, open indigo, the rest blue; a short one is only an icon with its name over it */
.btn.secondary.bt-del {
  background: #fde9e7;
  color: #a1281c;
  border-color: #f1b7b0;
}
.btn.secondary.bt-edit {
  background: #e5f4e8;
  color: #25693a;
  border-color: #a9d8b7;
}
.btn.secondary.bt-done {
  background: #e0f4f1;
  color: #0f6b5f;
  border-color: #9fd6cc;
}
.btn.secondary.bt-back {
  background: #fff1d6;
  color: #8a5a00;
  border-color: #f0d49a;
}
.btn.secondary.bt-out {
  background: #e8eaf9;
  color: #3d4a9a;
  border-color: #bcc3ee;
}
.btn.secondary.bt-add {
  background: #e3f1fb;
  color: #14578a;
  border-color: #a8d0ee;
}
.btn.secondary.bt-del:hover,
.btn.secondary.bt-edit:hover,
.btn.secondary.bt-done:hover,
.btn.secondary.bt-back:hover,
.btn.secondary.bt-out:hover,
.btn.secondary.bt-add:hover {
  filter: brightness(0.96);
}
html[data-theme='dark'] .btn.secondary.bt-del {
  background: #4a2320;
  color: #ffb4ab;
  border-color: #7a3a35;
}
html[data-theme='dark'] .btn.secondary.bt-edit {
  background: #1f3a27;
  color: #a9dcb6;
  border-color: #3d6a4b;
}
html[data-theme='dark'] .btn.secondary.bt-done {
  background: #173b36;
  color: #9be0d4;
  border-color: #2f6a60;
}
html[data-theme='dark'] .btn.secondary.bt-back {
  background: #4a3416;
  color: #ffcf8a;
  border-color: #7a5a2a;
}
html[data-theme='dark'] .btn.secondary.bt-out {
  background: #252b52;
  color: #bcc3f5;
  border-color: #444d8a;
}
html[data-theme='dark'] .btn.secondary.bt-add {
  background: #17364b;
  color: #9fd0f2;
  border-color: #2e5a7a;
}
.btn.icon-only {
  min-width: 34px;
  width: 34px;
  min-height: 34px;
  padding: 0;
  gap: 0;
  position: relative;
}
.btn.icon-only svg {
  display: block;
}
[data-hint] {
  position: relative;
}
[data-hint]:hover::after,
[data-hint]:focus-visible::after {
  content: attr(data-hint);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 60;
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1b1f23;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.btn.secondary.bt-asset {
  background: #fbe6ee;
  color: #9b2c57;
  border-color: #f0b8ce;
}
.btn.secondary.bt-plan {
  background: #e0f2fa;
  color: #0b6a8c;
  border-color: #a5d4e8;
}
html[data-theme='dark'] .btn.secondary.bt-asset {
  background: #4a2036;
  color: #f3b3cf;
  border-color: #7a3a58;
}
html[data-theme='dark'] .btn.secondary.bt-plan {
  background: #12384a;
  color: #9bd6ee;
  border-color: #2e6580;
}
.btn.secondary.bt-end {
  background: #fff1d6;
  color: #8a5a00;
  border-color: #f0d49a;
}
html[data-theme='dark'] .btn.secondary.bt-end {
  background: #4a3416;
  color: #ffcf8a;
  border-color: #7a5a2a;
}

/* the card of the backup on the signpost of the administration: its colour says how old the last backup is (as in Finance) */
.backup-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-left: 6px solid var(--bk, #2e9e6b);
}
.backup-card.fresh {
  --bk: #2e9e6b;
}
.backup-card.soon {
  --bk: #e0a030;
}
.backup-card.stale {
  --bk: #d9453d;
}
.backup-state {
  display: flex;
  align-items: center;
  gap: 14px;
}
.backup-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bk);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bk) 25%, transparent);
  flex: none;
}
.backup-card.stale .backup-dot {
  animation: backup-pulse 1.6s ease-in-out infinite;
}
.backup-state b {
  font-size: 18px;
}
.backup-age {
  color: var(--bk);
  font-weight: 600;
}
@keyframes backup-pulse {
  50% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--bk) 10%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .backup-card.stale .backup-dot {
    animation: none;
  }
}
html[data-theme='dark'] .backup-card.fresh .backup-age {
  color: #5fd39a;
}
html[data-theme='dark'] .backup-card.soon .backup-age {
  color: #f0c873;
}
html[data-theme='dark'] .backup-card.stale .backup-age {
  color: #ff8a80;
}

/* the number at an item of the menu (waiting notes and events), as in Finance; in the narrow bar it sits on the corner of the icon */
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #f59331;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 861px) {
  html.side-off .nav a .nav-badge {
    position: absolute;
    top: 2px;
    right: 4px;
    margin: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10.5px;
  }
}

/* the calendar: a month of days, the events as small bars, today lit */
.cal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cal-bar .month-name {
  font-size: 18px;
  font-weight: 700;
  min-width: 180px;
  text-align: center;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 6px;
}
.cal-day {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cal-day.out {
  opacity: 0.5;
}
.cal-day.today {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.cal-n {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.cal-day.today .cal-n {
  color: var(--accent);
}
.cal-ev {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  padding: 3px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-ev.done {
  text-decoration: line-through;
  opacity: 0.6;
}
.cal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cal-list .when {
  min-width: 130px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cal-list .what {
  flex: 1;
  min-width: 160px;
}
.cal-list form {
  margin: 0;
}
@media (max-width: 860px) {
  .cal-grid {
    grid-template-columns: 1fr;
  }
  .cal-head,
  .cal-day.empty {
    display: none;
  }
  .cal-day {
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .cal-day.out {
    display: none;
  }
}

/* the notes and reminders: a card for each, the ones waiting are marked */
.note-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note-card.waiting {
  border-left: 6px solid #f59331;
}
.note-card.done .note-title {
  text-decoration: line-through;
  opacity: 0.6;
}
.note-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.note-head form {
  margin: 0;
}
.note-title {
  flex: 1;
  min-width: 140px;
}
.note-body {
  margin: 0;
  white-space: pre-wrap;
}

/* a fold inside of a card (edit of a note, the guide) is small, not a heading */
.card details.fold details.fold > summary,
.note-card details.fold > summary {
  font-size: 14px;
  font-weight: 600;
  min-height: 36px;
}
@media (max-width: 860px) {
  .cal-list li {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .cal-list .when {
    min-width: 0;
    flex: none;
    max-width: 96px;
  }
  .cal-list .what {
    min-width: 0;
  }
}

/* the reminders to deal with (late, today): a card with an orange edge over the calendar, as in Finance */
.due-card {
  border-left: 6px solid #f59331;
}
.due-card h3 {
  margin: 0 0 10px;
}
.cal-list .when.late {
  color: #b3261e;
  font-weight: 700;
}
html[data-theme='dark'] .cal-list .when.late {
  color: #ff9a92;
}

/* a user and a role inside of a card of the administration: a framed box, not a card in a card (as in Finance) */
.user-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 18px;
  background: var(--card);
}
.role-box {
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
}
.role-box.custom {
  border-left-color: #2e9e6b;
}
.role-box.new {
  border-left-color: #1e8e3e;
}
.role-pill {
  align-self: flex-start;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.role-box.new .role-pill {
  color: #1e8e3e;
  background: #ddf1e3;
}
html[data-theme='dark'] .role-box.new .role-pill {
  color: #7fd3a2;
  background: #1e3a2e;
}
.role-box .muted {
  color: var(--muted);
}
.role-box > summary {
  cursor: pointer;
  list-style: none;
}
.role-box > summary::-webkit-details-marker {
  display: none;
}
.role-box p {
  margin: 0;
}
.role-edit > summary {
  cursor: pointer;
  color: var(--link, var(--accent));
  font-weight: 600;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* the filter of the audit log: a search, a person, a kind, the days; they wrap on a narrow screen */
.audit-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.audit-filter input[type='search'] {
  flex: 1 1 220px;
  min-width: 0;
}
.audit-filter label.inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.access-form > .hint {
  margin-bottom: 12px;
}

/* the help as in Finance: a search with a count and "expand all", the groups, and a card for each topic with its first sentence */
.help-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.help-bar input {
  flex: 1 1 280px;
  border-radius: 999px;
}
.help-search {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.help-group[hidden],
.help-topic[hidden] {
  display: none;
}
.help-group-title {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 16px;
}
.help-topic {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 12px 20px;
}
.help-topic > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.help-topic > summary::-webkit-details-marker {
  display: none;
}
.help-topic > summary::after {
  content: '▸';
  color: var(--accent);
  flex: none;
}
.help-topic[open] > summary::after {
  content: '▾';
}
.help-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.help-title b {
  font-size: 17px;
}
.help-sum {
  color: var(--muted);
  font-size: 14px;
}
.help-topic[open] .help-sum {
  display: none;
}
html.glass .help-topic {
  background: var(--g-card-in);
  border-color: var(--g-border);
}

/* the deals: the numbers on top, the phases as columns and the deals as cards (the colour of a phase on the edge) */
.deal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.deal-top .admin-tabs {
  margin: 0;
}
.deal-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 12px;
  align-items: start;
  overflow-x: auto;
}
.deal-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--stage, var(--muted)) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--stage, var(--muted)) 25%, transparent);
  min-width: 0;
}
.deal-col header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 4px 6px;
  border-bottom: 3px solid var(--stage, var(--muted));
}
.deal-col header b {
  font-size: 15px;
}
.deal-col header .muted {
  font-size: 12.5px;
  color: var(--muted);
}
.stage-inquiry {
  --stage: #1f7fc4;
}
.stage-offer {
  --stage: #6a4cc7;
}
.stage-negotiation {
  --stage: #e08a00;
}
.stage-won {
  --stage: #1e8e3e;
}
.stage-lost {
  --stage: #c62828;
}
.kind-company {
  --stage: #1c6bc7;
}
.kind-person {
  --stage: #7a35a8;
}
.badge[class*='stage-'],
.badge[class*='status-'],
.badge[class*='kind-'] {
  background: color-mix(in srgb, var(--stage) 16%, transparent);
  color: var(--stage-ink, var(--stage));
  border-color: color-mix(in srgb, var(--stage) 35%, transparent);
  font-weight: 700;
}
html[data-theme='dark'] .badge[class*='stage-'],
html[data-theme='dark'] .badge[class*='status-'],
html[data-theme='dark'] .badge[class*='kind-'] {
  color: color-mix(in srgb, var(--stage) 55%, #fff);
}
.deal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--stage, var(--muted));
}
.deal-title {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.deal-title:hover {
  text-decoration: underline;
}
.deal-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.deal-date {
  font-size: 12.5px;
  color: var(--muted);
}
.deal-date.late,
td.late {
  color: #b3261e;
  font-weight: 700;
}
html[data-theme='dark'] .deal-date.late,
html[data-theme='dark'] td.late {
  color: #ff9a92;
}
.deal-owner {
  font-size: 12.5px;
}
.deal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.deal-actions form {
  margin: 0;
}
.deal-none {
  margin: 4px;
  font-size: 13px;
}
.cal-ev.deal {
  background: color-mix(in srgb, #e08a00 18%, transparent);
}
@media (max-width: 860px) {
  .deal-board {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
}
html.glass .deal-card {
  background: var(--g-card-in);
  border-color: var(--g-border);
  border-left-color: var(--stage, var(--muted));
}

@media (min-width: 620px) {
  .kpi-row.n4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.deal-board {
  grid-template-columns: repeat(5, minmax(172px, 1fr));
  gap: 10px;
}
.deal-actions .btn.sm {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}
.deal-col {
  padding: 10px;
}
.deal-card {
  padding: 10px 12px;
}
@media (max-width: 860px) {
  .deal-board {
    grid-template-columns: 1fr;
  }
}

/* back and forward in the installed app (public/js/histnav.js): a pill of two arrows at the start of the top bar */
.hist-nav {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  overflow: hidden;
  margin-right: auto; /* the bar of this application is set to the right: the pill stays at the left */
}
.hist-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
.hist-btn + .hist-btn {
  border-left: 1px solid var(--line);
}
.hist-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.hist-btn:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: -3px;
}
.hist-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* the requests: seven phases as columns, the colour of a phase on the edge; "K fakturaci" with the paper to send */
.status-prep_cn {
  --stage: #1f7fc4;
}
.status-approval_cn {
  --stage: #6a4cc7;
}
.status-ordered {
  --stage: #6cc08b;
  --stage-ink: #1d6b3c;
}
.status-done {
  --stage: #1e8e3e;
}
.status-to_bill {
  --stage: #e08a00;
}
.status-invoice {
  --stage: #2e6170;
}
.status-postponed {
  --stage: #7a7f87;
}
.req-board {
  grid-template-columns: repeat(7, minmax(190px, 1fr));
}
.req-code {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.req-move select {
  min-height: 34px;
  font-size: 13px;
  padding: 0 8px;
  max-width: 100%;
}
.req-move {
  margin: 0;
}
.req-bill-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.bill-files {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  margin: 0;
}
.bill-files legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 13px;
}
.notice.warn {
  background: #fff1d6;
  color: #7a4a00;
  border: 1px solid #f0d49a;
}
html[data-theme='dark'] .notice.warn {
  background: #3a2c10;
  color: #ffd98a;
  border-color: #6a5020;
}
@media (max-width: 860px) {
  .req-board {
    grid-template-columns: 1fr;
  }
}
.req-board {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  overflow-x: visible;
}

/* a proposal of Johny in the chat: the sentence and the button that carries it out */
.johny-msg.johny-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.contact-people .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.contact-people h2 {
  margin: 0;
}

/* one height and one look of a drop-down all over (Safari ignores the height of its native one): the arrow is drawn here */
html select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 44px;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
/* the file field and the drop-down next to it have one height */
.fp,
input[type='file'] {
  box-sizing: border-box;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
.f select {
  height: 44px;
}
.cform .grid {
  align-items: end;
}
/* every row of buttons: on one axis */
.deal-actions,
.req-move,
td.act,
.head {
  align-items: center;
}
/* the small drop-down on a card of the board is as high as the small buttons beside it */
html .deal-actions select,
html .req-move select {
  min-height: 34px;
  height: 34px;
}