/*
 * The "crystal" look (as the "glass" look of INTECHI FINANCE): a soft background with blurred colour, frosted translucent cards, pill
 * buttons and chips, a floating menu. It only overrides the look (colours, rounding, shadows); nothing of the markup or the functions
 * changes. Everything is under `html.glass`, so one class switches it on and off. The light and the dark crystal share the rules: they
 * differ in the variables only (the two blocks right below).
 */

/* ---- the light crystal ---- */
html.glass {
  --bg: #e8eaee;
  --card: rgba(255, 255, 255, 0.62);
  --soft: rgba(255, 255, 255, 0.5);
  --soft2: rgba(255, 255, 255, 0.38);
  --line: rgba(255, 255, 255, 0.85);
  --grid: rgba(21, 32, 27, 0.07);
  --ink: #121b26;
  --muted: #5b6a7a;
  --yellow: #f6e15a;
  --yellow-ink: #1c1a0e;

  --g-card: var(--card);
  --g-card-in: rgba(255, 255, 255, 0.55); /* a card inside a card */
  --g-border: rgba(255, 255, 255, 0.85);
  --g-shadow: 0 10px 34px rgba(31, 46, 74, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --g-pill: rgba(255, 255, 255, 0.65);
  --g-pill-border: #fff;
  --g-pill-shadow: 0 3px 10px rgba(31, 46, 74, 0.06);
  --g-pill-on: #fff;
  --g-pill-on-shadow: 0 5px 16px rgba(31, 46, 74, 0.14);
  --g-field: rgba(255, 255, 255, 0.72);
  --g-field-border: rgba(31, 46, 74, 0.16);
  --g-field-shadow: inset 0 1px 2px rgba(31, 46, 74, 0.08);
  --g-float: rgba(255, 255, 255, 0.99);
  --g-float-shadow: 0 18px 50px rgba(31, 46, 74, 0.22);
  --g-sep: rgba(21, 32, 27, 0.07);
  --g-hover: rgba(255, 255, 255, 0.55);
  --g-side-mix: 92%; /* how much of the colour of the firm the menu keeps (--menu is set per firm) */
  --g-side-border: rgba(255, 255, 255, 0.8);
  --g-good: rgba(214, 242, 226, 0.85);
  --g-good-ink: #0a4d3f;
  --g-bad: rgba(248, 220, 220, 0.85);
  --g-bad-ink: #8a1c1c;
  --g-backdrop: rgba(30, 40, 60, 0.28);
  --g-bg:
    radial-gradient(900px 620px at 82% -4%, rgba(247, 214, 66, 0.6), 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%),
    radial-gradient(520px 420px at 100% 100%, rgba(240, 150, 90, 0.28), transparent 66%), #e9ebef;
}

/* ---- the dark crystal: deep blue ground with soft blue, violet and amber light, glass a little lighter than the ground ---- */
html.glass[data-theme='dark'] {
  --bg: #080d18;
  --card: rgba(255, 255, 255, 0.07);
  --soft: rgba(255, 255, 255, 0.05);
  --soft2: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.14);
  --grid: rgba(255, 255, 255, 0.08);
  --ink: #e8eef7;
  --muted: #9fb0c4;

  --g-card-in: rgba(255, 255, 255, 0.06);
  --g-border: rgba(255, 255, 255, 0.14);
  --g-shadow: 0 12px 38px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --g-pill: rgba(255, 255, 255, 0.08);
  --g-pill-border: rgba(255, 255, 255, 0.16);
  --g-pill-shadow: none;
  --g-pill-on: rgba(255, 255, 255, 0.18);
  --g-pill-on-shadow: 0 5px 16px rgba(0, 0, 0, 0.35);
  --g-field: rgba(255, 255, 255, 0.07);
  --g-field-border: rgba(255, 255, 255, 0.16);
  --g-field-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --g-float: rgba(22, 29, 46, 0.99);
  --g-float-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --g-sep: rgba(255, 255, 255, 0.08);
  --g-hover: rgba(255, 255, 255, 0.08);
  --g-side-mix: 80%;
  --g-side-border: rgba(255, 255, 255, 0.12);
  --g-good: rgba(40, 170, 105, 0.25);
  --g-good-ink: #bfe8d2;
  --g-bad: rgba(220, 80, 70, 0.3);
  --g-bad-ink: #ffb4ae;
  --g-backdrop: rgba(0, 0, 0, 0.5);
  --g-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.42), transparent 64%),
    radial-gradient(680px 520px at 52% 42%, rgba(110, 80, 200, 0.22), transparent 70%), #080d18;
}

/* the background: soft colour behind everything, a fixed layer of its own (a fixed background on the body is painted again at every
   step of the scroll, which is slow, above all in Safari) */
html.glass {
  background: var(--bg);
}
html.glass body {
  background: transparent;
}
html.glass body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--g-bg);
  pointer-events: none;
}

/* ---- the layout: the menu floats as a rounded crystal panel ---- */
html.glass .shell {
  padding: 16px;
  gap: 18px;
}
html.glass .main {
  padding: 16px 12px 48px;
}
@media (min-width: 861px) {
  html.glass .side {
    top: 16px;
    height: calc(100vh - 32px);
    border-radius: 28px;
    background: color-mix(in srgb, var(--menu) var(--g-side-mix), transparent);
    border: 1px solid var(--g-side-border);
    box-shadow: var(--g-shadow);
    overflow: visible;
    padding: 0;
    gap: 0;
  }
  html.glass.side-off .side {
    padding: 0;
    gap: 0;
  }
  /* the menu scrolls when it is longer than the window. The panel itself does not scroll: the block inside does, and it reaches 14px
     beyond the panel, so the thin bar of the scroll sits in the gap beside the menu, not on it (as in Finance) */
  html.glass .side-scroll {
    --side-gap: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--side-gap);
    flex: 1 1 auto;
    min-height: 0;
    width: calc(100% + 14px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 20px 20px 14px;
    border-radius: 27px 0 0 27px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent;
  }
  html.glass.side-off .side-scroll {
    --side-gap: 14px;
    align-items: center;
    padding: 14px 14px 14px 8px;
  }
  html.glass .side-scroll::-webkit-scrollbar {
    width: 8px;
  }
  html.glass .side-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  html.glass .side-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink) 28%, transparent);
    border-radius: 8px;
  }
}
html.glass .userbox {
  border-top-color: var(--g-sep);
}

/* the items of the menu: pills; the lit one is a lighter pill with a soft shadow */
html.glass .nav a {
  border-radius: 999px;
  font-weight: 600;
}
html.glass .nav a:hover {
  background: var(--g-hover);
}
html.glass .nav a.on {
  background: var(--g-pill-on);
  color: var(--ink);
  box-shadow: var(--g-pill-on-shadow);
}
html.glass .nav a.on::before {
  display: none;
}
html.glass .nav a.on .nav-ico {
  color: var(--accent);
}
html.glass[data-theme='dark'] .nav a.on .nav-ico {
  color: var(--link, var(--accent));
}
html.glass .userbox .who-role {
  background: var(--g-good);
  color: var(--g-good-ink);
  border-color: var(--g-pill-border);
}

/* ---- cards: frosted crystal ---- */
html.glass .card,
html.glass .tile,
html.glass .adm-row,
html.glass .lcard,
html.glass .kpi-tile,
html.glass .notice {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: 24px;
  box-shadow: var(--g-shadow);
}
html.glass .notice {
  border-radius: 18px;
}
html.glass .notice.good {
  background: var(--g-good);
  color: var(--g-good-ink);
}
html.glass .notice.bad {
  background: var(--g-bad);
  color: var(--g-bad-ink);
}
html.glass .tile {
  border-radius: 20px;
  transition:
    box-shadow 0.2s,
    transform 0.2s,
    border-color 0.2s;
}
html.glass .tile:hover {
  border-color: var(--g-pill-border);
  box-shadow: 0 14px 38px rgba(31, 46, 74, 0.16);
  transform: translateY(-1px);
}
/* a card inside a card: a lighter, flat layer inside the panel it sits in */
html.glass .card .card,
html.glass .card .tile {
  background: var(--g-card-in);
  box-shadow: none;
}

/* ---- headings: lighter, a little tighter ---- */
html.glass h1,
html.glass h2,
html.glass h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ---- buttons and chips: pills; the main button is yellow, the others are crystal ---- */
html.glass .btn {
  border-radius: 999px;
  background: var(--yellow);
  color: var(--yellow-ink);
  box-shadow: 0 6px 18px rgba(214, 180, 20, 0.28);
}
html.glass .btn:hover {
  filter: brightness(1.04);
}
html.glass .btn.secondary {
  background: var(--g-pill);
  color: var(--ink);
  border: 1px solid var(--g-pill-border);
  box-shadow: var(--g-pill-shadow);
}
html.glass .btn.danger {
  background: var(--g-bad);
  color: var(--g-bad-ink);
  box-shadow: none;
}
html.glass .chip {
  background: var(--g-pill);
  border: 1px solid var(--g-pill-border);
  color: var(--ink);
  box-shadow: var(--g-pill-shadow);
}
/* back and forward of the installed app: a soft glass pill like the other pills */
html.glass .hist-nav {
  background: var(--g-pill);
  border: 1px solid var(--g-pill-border);
  box-shadow: var(--g-pill-shadow);
}
html.glass .hist-btn + .hist-btn {
  border-left-color: var(--g-sep);
}
/* "Show more" of the reminders is a soft pill like the others */
html.glass .rem-more {
  background: var(--g-pill);
  border: 1px solid var(--g-pill-border);
  box-shadow: var(--g-pill-shadow);
}
html.glass .chip.on {
  background: var(--g-pill-on);
  color: var(--ink);
  box-shadow: var(--g-pill-on-shadow);
  border-color: var(--g-pill-border);
}
html.glass .badge {
  border-radius: 999px;
  border: 1px solid var(--g-border);
}

/* ---- the fields: :where() keeps the weight of this rule low, so the search pill below can take the box away from its field ---- */
html.glass
  :where(
    input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
    select,
    textarea
  ) {
  background: var(--g-field);
  border: 1px solid var(--g-field-border);
  border-radius: 14px;
  box-shadow: var(--g-field-shadow);
  color: var(--ink);
}
/* the search is one pill: the field inside has no box of its own */
html.glass .filter-input {
  background: var(--g-field);
  border: 1px solid var(--g-field-border);
  border-radius: 999px;
  box-shadow: var(--g-pill-shadow);
}
html.glass .filter-input input {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  outline-offset: 4px;
}
html.glass .top-tools .chip,
html.glass .top-tools button {
  border-radius: 999px;
}
html.glass .zbtn {
  background: var(--g-pill);
  border: 1px solid var(--g-pill-border);
  box-shadow: var(--g-pill-shadow);
}

/* ---- tables: quiet lines, small capitals in the heads ---- */
html.glass th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.glass th,
html.glass td {
  border-bottom-color: var(--g-sep);
}

/* ---- what floats over the page (menus, dialogs, the tip of the narrow menu, the hand) must be nearly solid ---- */
html.glass .dd ul,
html.glass .zdd ul,
html.glass dialog,
html.glass .hand-btn {
  background: var(--g-float);
  color: var(--ink);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-float-shadow);
}
html.glass .dd ul,
html.glass .zdd ul {
  border-radius: 18px;
}
html.glass dialog {
  border-radius: 24px;
}
html.glass dialog::backdrop {
  background: var(--g-backdrop);
}
html.glass .hand-btn.on {
  background: var(--accent);
  color: #fff;
}

/* ---- the switch of the look: lit while the crystal look is on ---- */
.look-toggle[aria-pressed='true'] {
  color: var(--accent);
}
html.glass[data-theme='dark'] .look-toggle[aria-pressed='true'] {
  color: var(--link, #8fb8ff);
}

/* ---- a person who asked for less transparency: the cards are solid, the look stays calm ---- */
@media (prefers-reduced-transparency: reduce) {
  html.glass {
    --card: #ffffff;
    --g-card: #ffffff;
    --g-card-in: #f6f7fa;
    --line: #e4e7ec;
    --g-border: #e4e7ec;
  }
  html.glass[data-theme='dark'] {
    --card: #161d2e;
    --g-card: #161d2e;
    --g-card-in: #1b2438;
    --line: #2a3550;
    --g-border: #2a3550;
  }
  html.glass .side {
    background: color-mix(in srgb, var(--menu) 90%, var(--bg));
  }
}

/* the buttons of one kind keep their colour on the crystal (as in Finance), as soft glass with a tint */
html.glass .btn.icon-only {
  border-radius: 12px;
}
html.glass .btn.secondary.bt-del {
  background: color-mix(in srgb, #b3261e 16%, var(--g-pill));
  border-color: color-mix(in srgb, #b3261e 45%, transparent);
}
html.glass .btn.secondary.bt-edit {
  background: color-mix(in srgb, #2e8b57 18%, var(--g-pill));
  border-color: color-mix(in srgb, #2e8b57 45%, transparent);
}
html.glass .btn.secondary.bt-done {
  background: color-mix(in srgb, #0f8a7c 18%, var(--g-pill));
  border-color: color-mix(in srgb, #0f8a7c 45%, transparent);
}
html.glass .btn.secondary.bt-back,
html.glass .btn.secondary.bt-end {
  background: color-mix(in srgb, #d99a00 18%, var(--g-pill));
  border-color: color-mix(in srgb, #d99a00 45%, transparent);
}
html.glass .btn.secondary.bt-out {
  background: color-mix(in srgb, #4b5bd6 16%, var(--g-pill));
  border-color: color-mix(in srgb, #4b5bd6 45%, transparent);
}
html.glass .btn.secondary.bt-add {
  background: color-mix(in srgb, #1f7fc4 16%, var(--g-pill));
  border-color: color-mix(in srgb, #1f7fc4 45%, transparent);
}
html.glass .btn.secondary.bt-asset {
  background: color-mix(in srgb, #b8326a 16%, var(--g-pill));
  border-color: color-mix(in srgb, #b8326a 45%, transparent);
}
html.glass .btn.secondary.bt-plan {
  background: color-mix(in srgb, #0b7fa8 16%, var(--g-pill));
  border-color: color-mix(in srgb, #0b7fa8 45%, transparent);
}
html.glass[data-theme='dark'] .btn.secondary.bt-del {
  color: #ffb4ab;
}
html.glass[data-theme='dark'] .btn.secondary.bt-edit {
  color: #a9dcb6;
}
html.glass[data-theme='dark'] .btn.secondary.bt-done {
  color: #9be0d4;
}
html.glass[data-theme='dark'] .btn.secondary.bt-back,
html.glass[data-theme='dark'] .btn.secondary.bt-end {
  color: #ffcf8a;
}
html.glass[data-theme='dark'] .btn.secondary.bt-out {
  color: #bcc3f5;
}
html.glass[data-theme='dark'] .btn.secondary.bt-add {
  color: #9fd0f2;
}
html.glass[data-theme='dark'] .btn.secondary.bt-asset {
  color: #f3b3cf;
}
html.glass[data-theme='dark'] .btn.secondary.bt-plan {
  color: #9bd6ee;
}
/* a plain badge (Firma, Osoba) must stay readable on the crystal */
html.glass
  .badge:not(.good):not(.warn):not(.bad):not(.muted):not([class*='stage-']):not(
    [class*='status-']
  ):not([class*='kind-']) {
  background: var(--g-pill);
  color: var(--ink);
  border-color: var(--g-pill-border);
}
html.glass .map-canvas {
  border: 1px solid var(--g-border);
}

/* ---- the rest of the pages: coloured edges of the tiles stay, the inner boxes are a lighter flat layer, the graph and the chat ---- */
html.glass .co-tile {
  border-left: 4px solid var(--co, var(--accent));
}
html.glass .tile.good {
  border-left: 4px solid #1baf7a;
}
html.glass .tile.warn {
  border-left: 4px solid #eda100;
}
html.glass .johny-areas,
html.glass .johny-areas-list li {
  border-color: var(--g-sep);
}
html.glass .johny-list li,
html.glass .tpl-text {
  background: var(--g-card-in);
  border-color: var(--g-border);
}
html.glass .map {
  background-color: var(--g-card-in);
  border-color: var(--g-border);
  border-radius: 18px;
}
html.glass .johny-chat {
  border-radius: 24px;
  background: var(--g-float);
  border-color: var(--g-border);
  box-shadow: var(--g-float-shadow);
}
html.glass .johny-chat-form textarea {
  border-radius: 14px;
}
html.glass .johny-attach {
  background: var(--g-pill);
  border-color: var(--g-pill-border);
}
html.glass .rail-tip {
  border-radius: 12px;
}
html.glass .fp {
  border: 1px dashed var(--g-field-border);
  background: var(--g-field);
  border-radius: 14px;
}
html.glass .fp-btn {
  background: var(--g-pill);
  border-color: var(--g-pill-border);
  border-radius: 999px;
}
html.glass input[type='file'] {
  border: 1px dashed var(--g-field-border);
  background: var(--g-field);
  border-radius: 14px;
}
html.glass input[type='file']::file-selector-button {
  background: var(--g-pill);
  border-color: var(--g-pill-border);
  color: var(--ink);
  border-radius: 999px;
}

html.glass .nav-sep {
  border-top-color: var(--g-sep);
}
html.glass .menu-toggle {
  background: var(--g-pill);
  border-color: var(--g-pill-border);
  box-shadow: var(--g-pill-shadow);
}
@media (min-width: 861px) {
  html.glass .nav-help {
    margin-top: calc(-1 * var(--side-gap, 20px));
  }
}
html.glass .adm-row.warn {
  border-left: 4px solid #e5484d;
}
html.glass .adm-row.good {
  border-left: 4px solid #1baf7a;
}

/* boxes of the users and roles inside of the cards of the administration: a lighter flat layer */
html.glass .user-card,
html.glass .role-box {
  background: var(--g-card-in);
  border-color: var(--g-border);
}