:root {
  --bg: #5d73a0;
  --topbar: #24282f;
  --primary: #4169cf;
  --accent: #6c78ea;
  --text: #2b2f36;
  --page-bg: #ffffff;
  --app-font: "Nunito", "Segoe UI", sans-serif;
}

/* Fonts an employee may pick; Windows ships all of them, Nunito comes with the site. */
.font-segoe { --app-font: "Segoe UI", Tahoma, sans-serif; }
.font-arial { --app-font: Arial, "Helvetica Neue", sans-serif; }
.font-calibri { --app-font: Calibri, Carlito, "Segoe UI", sans-serif; }
.font-verdana { --app-font: Verdana, Geneva, sans-serif; }
.font-tahoma { --app-font: Tahoma, Verdana, sans-serif; }
.font-trebuchet { --app-font: "Trebuchet MS", "Segoe UI", sans-serif; }
.font-georgia { --app-font: Georgia, "Times New Roman", serif; }
.font-times { --app-font: "Times New Roman", Times, serif; }
.font-cambria { --app-font: Cambria, Georgia, serif; }
.font-nunito { --app-font: "Nunito", "Segoe UI", sans-serif; }

/* Form controls do not inherit the page font by default. */
button,
input,
select,
textarea {
  font-family: inherit;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--app-font);
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  padding: 8px 22px;
  background: var(--topbar);
  color: #fff;
}

.brand,
.topbar-right {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 600;
}

  display: block;
  width: 210px;
  height: auto;
}

.topbar-right {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.topbar-right form {
  margin: 0;
}

.btn-calculator {
  margin-right: 12px;
  padding: 11px 15px;
  border: 0;
  border-radius: 5px;
  background: #17a755;
  color: #fff;
  font: 700 13px var(--app-font);
  box-shadow: 0 2px 8px rgba(23, 167, 85, 0.6);
  cursor: pointer;
}

.btn-calculator:hover {
  background: #128a46;
}

.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #e5e7eb;
  font-size: 23px;
  text-decoration: none;
}

.header-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

.icon-chat {
  color: #38bdf8;
}

.icon-bell {
  color: #fbbf24;
}

.icon-palette i {
  background: conic-gradient(from 200deg, #f43f5e, #f59e0b, #22c55e, #38bdf8, #a855f7, #f43f5e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 10px;
  background: #e0455a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.rates {
  display: flex;
  gap: 20px;
  margin-left: 12px;
  font-size: 14px;
  font-weight: 600;
}

.clock {
  margin-left: 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.languages {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

.language {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: #fff;
  font: 700 13px var(--app-font);
  cursor: pointer;
}

.language img {
  width: 21px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.language:hover {
  background: rgba(255, 255, 255, 0.1);
}

.language.active {
  border-color: var(--accent);
  background: rgba(108, 120, 234, 0.25);
}

.btn-logout {
  padding: 6px 8px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.btn-logout:hover {
  color: #ff8a80;
}

/* Page */
.content {
  padding: 36px 18px;
}

.org-bar {
  padding: 18px 21px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(#fafafa, #d9d9d9);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
  font-size: 18px;
  font-weight: 700;
}

.org-bar em {
  font-style: italic;
}

.tabs-card {
  padding: 20px 29px 22px;
  border-radius: 0 0 14px 14px;
  background: var(--page-bg);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border: 2px solid transparent;
  border-radius: 6px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.tab:hover {
  background: #f1f4fc;
}

.tab.active {
  border-color: #3350c4;
  color: #2e6b4f;
}

.info-sheet {
  display: grid;
  gap: 22px;
  margin-top: 24px;
  padding-bottom: 84px;
}

.info-card {
  overflow: hidden;
  border-radius: 14px;
  background: var(--page-bg);
  box-shadow: 0 2px 10px rgba(20, 30, 60, 0.12);
}

.info-card h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 24px;
  border-bottom: 1px solid #e3e8f2;
  background: rgba(31, 42, 68, 0.05);
  color: #1f2a44;
  font-size: 16px;
  font-weight: 800;
}

.info-card h2 span {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #17a755;
  color: #fff;
  font-size: 14px;
}

.info-card h3 {
  margin: 4px 24px 10px;
  color: #1f2a44;
  font-size: 15px;
  font-weight: 800;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  padding: 20px 24px;
}

.info-field label {
  display: block;
  margin-bottom: 6px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 700;
}

.info-sheet input,
.info-sheet textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
  font: 400 15px var(--app-font);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.info-sheet input[readonly] {
  border-style: dashed;
  background: #eef1f6;
  color: #4b5563;
  cursor: not-allowed;
}

.charter-lock {
  margin: 6px 0 0;
  color: #8a5a00;
  font-size: 12px;
  font-weight: 700;
}

.charter-lock[hidden] {
  display: none;
}

.info-sheet input:hover,
.info-sheet textarea:hover {
  border-color: #aab4c6;
}

.info-sheet input:focus,
.info-sheet textarea:focus {
  border-color: var(--accent);
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(108, 120, 234, 0.2);
}

.info-sheet textarea {
  resize: vertical;
}

.info-long {
  display: grid;
  gap: 16px;
  padding: 4px 24px 22px;
}

.info-table {
  width: calc(100% - 48px);
  margin: 0 24px 22px;
  border-collapse: collapse;
}

.info-table th {
  padding: 9px 10px;
  border-bottom: 2px solid #e3e8f2;
  color: #4b5563;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.info-table td {
  padding: 6px 10px 6px 0;
  vertical-align: top;
}

.info-sheet textarea.auto-grow {
  min-height: 42px;
  overflow: hidden;
  resize: none;
  line-height: 1.4;
}

.info-table th:first-child,
.info-table td:first-child {
  padding-left: 0;
}

.info-table .info-number {
  width: 36px;
  color: #6b7280;
  font-weight: 800;
  text-align: center;
}

.info-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 12px 36px;
  border-top: 1px solid #d5dcea;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -4px 14px rgba(20, 30, 60, 0.12);
}

.info-actions .pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1.5px solid #174a43;
  border-radius: 8px;
  color: #174a43;
  font: 700 15px var(--app-font);
  text-decoration: none;
}

.info-actions .pdf-download i {
  color: #c0392b;
}

.info-actions .pdf-download:hover {
  background: #174a43;
  color: #fff;
}

.info-actions .pdf-download:hover i {
  color: #fff;
}

.info-actions span {
  color: #6b7280;
  font-size: 14px;
}

.info-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  border: 0;
  border-radius: 8px;
  background: #17a755;
  color: #fff;
  font: 700 15px var(--app-font);
  cursor: pointer;
}

.info-actions button:hover {
  background: #128a46;
}

@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-colors {
  position: fixed;
  inset: auto;
  width: 372px;
  margin: 0;
  padding: 14px 16px 16px;
  overflow: visible;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}

.page-colors h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
}

.page-colors h4 i {
  color: #17a755;
}

.page-colors h4:not(:first-child) {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

.page-colors .swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.page-colors .swatches button {
  height: 32px;
  padding: 0;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  cursor: pointer;
}

.page-colors .swatches button:hover {
  transform: scale(1.1);
}

.page-colors .swatches button.active,
.page-colors .custom-color input.active {
  border: 2px solid #17a755;
  box-shadow: 0 0 0 2px rgba(23, 167, 85, 0.3);
}

.page-colors .custom-color {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.page-colors .custom-color label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}

.page-colors .custom-color input {
  width: 46px;
  height: 32px;
  padding: 2px;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.page-colors .custom-color button {
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: #17a755;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.page-colors .custom-color button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.custom-color-warning {
  margin: 8px 0 0;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}

.page-colors .fonts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.page-colors .fonts button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #d5dbe6;
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: var(--app-font);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.page-colors .fonts button span {
  color: #17a755;
  font-size: 17px;
  font-weight: 700;
}

.page-colors .fonts button small {
  color: #6b7280;
  font-size: 11px;
}

.page-colors .fonts button:hover {
  border-color: #17a755;
}

.page-colors .fonts button.active {
  border: 2px solid #17a755;
  background: #f0faf4;
}

.page-colors::before {
  position: absolute;
  top: -7px;
  left: calc(var(--arrow-left, 50%) - 7px);
  width: 14px;
  height: 14px;
  background: #fff;
  content: "";
  transform: rotate(45deg);
}

.page-colors > * {
  position: relative;
}

.accounts {
  margin: 0 24px 22px;
  padding: 14px 18px;
  border-left: 4px solid #4f7fe0;
  border-radius: 8px;
  background: rgba(31, 42, 68, 0.04);
}

.accounts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accounts-head h3 {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  text-align: left;
}

.accounts-head button {
  width: 34px;
  height: 34px;
  border: 1px solid #1f2a44;
  border-radius: 8px;
  background: #fff;
  color: #2f6df6;
  cursor: pointer;
}

.accounts.editing .accounts-head button {
  background: #2f6df6;
  color: #fff;
}

.account-row {
  padding: 10px 0;
  border-bottom: 1px solid #dfe4ee;
}

.account-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

.account-meta {
  margin-top: 4px;
  color: #4b5563;
  font-size: 13px;
}

.account-badge {
  padding: 3px 12px;
  border-radius: 12px;
  background: #4caf50;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.account-empty {
  margin: 10px 0;
  color: #8b93a3;
}

.account-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 4px solid #4f7fe0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 30, 60, 0.1);
}

.account-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
}

.account-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.account-actions button {
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}

.account-save {
  background: #3b82f6;
}

.account-delete {
  background: #c0392b;
}

.info-sheet .account-card input {
  border-color: #3f8f3f;
}

.account-main {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
}

.info-sheet .account-main input {
  width: auto;
}

.account-error {
  margin: 0;
  color: #b3261e;
  font-size: 13px;
  font-weight: 700;
}

.account-error:empty {
  display: none;
}

.accounts-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px dashed #4f7fe0;
  border-radius: 8px;
  background: #fff;
  color: #2f6df6;
  font: 700 14px var(--app-font);
  cursor: pointer;
}

.accounts-add:hover {
  background: #eef3ff;
}

.related {
  padding: 0 24px 22px;
}

.related-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: #17a755;
  color: #fff;
  font: 700 14px var(--app-font);
  cursor: pointer;
}

.related.collaterals {
  padding-top: 4px;
}

.collaterals h3 {
  margin: 0 0 6px;
  color: #1f2a44;
  font-size: 15px;
}

.credit-modal textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d5dbe6;
  border-radius: 9px;
  background: #fff;
  color: #1f2a44;
  font: 400 15px var(--app-font);
  resize: vertical;
}

.credit-modal textarea:focus {
  border-color: #17a755;
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 167, 85, 0.18);
}

.collateral-group[hidden] {
  display: none;
}

.collateral-current {
  margin: 0 0 10px;
  font-size: 14px;
}

.collateral-current a {
  color: #128a46;
  font-weight: 700;
}

.collaterals-table td {
  vertical-align: top;
}

.collateral-detail {
  display: block;
  font-size: 13px;
  line-height: 1.5;
}

.collateral-detail span {
  color: #6b7280;
}

.phones-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.phones-head label {
  margin: 0;
}

.phones-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 0;
  border-radius: 7px;
  background: #17a755;
  color: #fff;
  font: 700 13px var(--app-font);
  cursor: pointer;
}

.phones-head button:hover {
  background: #128a46;
}

.phones-table {
  width: 100%;
  border: 1px solid #cfd6e3;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.75);
}

.phones-table td {
  padding: 6px 10px;
  border-top: 1px solid #e3e8f2;
  font-size: 15px;
  vertical-align: middle;
}

.phones-table tr:first-child td {
  border-top: 0;
}

.phones-table td.info-number {
  width: 28px;
  color: #6b7280;
}

.phones-table .related-empty {
  padding: 10px;
  font-size: 14px;
}

.phones-table .related-actions {
  width: 80px;
  text-align: right;
}

.phones-table .related-actions button {
  width: 28px;
  height: 26px;
}

.phone-kinds {
  display: inline-flex;
  gap: 6px;
}

.phone-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.phone-icon.phone-phone,
.phone-choice.phone-phone input:checked ~ i {
  background: #17a755;
}

.phone-icon.phone-telegram,
.phone-choice.phone-telegram input:checked ~ i {
  background: #229ed9;
}

.phone-icon.phone-whatsapp,
.phone-choice.phone-whatsapp input:checked ~ i {
  background: #25d366;
}

.phone-icon:hover {
  filter: brightness(0.9);
}

.phone-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.phone-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #d5dbe6;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.credit-modal .phone-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.phone-choice i {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #fff;
  font-size: 16px;
}

.phone-choice.phone-phone i { color: #17a755; background: #e8f7ee; }
.phone-choice.phone-telegram i { color: #229ed9; background: #e6f4fb; }
.phone-choice.phone-whatsapp i { color: #25d366; background: #e7faef; }

.phone-choice input:checked ~ i {
  color: #fff;
}

.phone-choice:has(input:checked) {
  border-color: #17a755;
  background: #f0faf4;
  box-shadow: 0 0 0 3px rgba(23, 167, 85, 0.15);
}

.phone-choice:has(input:focus-visible) {
  outline: 2px solid #17a755;
  outline-offset: 2px;
}

.related.founders {
  padding-top: 4px;
}

.founders h3 {
  margin: 0 0 6px;
  color: #1f2a44;
  font-size: 15px;
}

.founders-summary {
  margin: 8px 0 0;
  color: #1f6b3a;
  font-weight: 800;
  text-align: right;
}

.founders-summary:empty {
  display: none;
}

.credit-modal.founder-modal {
  width: min(620px, calc(100vw - 32px));
}

.credit-modal.founder-modal .credit-rate-hint {
  margin: 0 0 14px;
  display: block;
}

.founder-note {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 12px;
}

.related-add:hover {
  background: #128a46;
}

.info-sheet .related-table {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e3e8f2;
  border-radius: 8px;
}

.related-table th {
  padding-left: 10px;
  background: rgba(31, 42, 68, 0.05);
}

.related-table td {
  padding: 10px;
  border-top: 1px solid #e3e8f2;
  overflow-wrap: anywhere;
}

.related-table th:first-child,
.related-table td:first-child {
  padding-left: 10px;
}

.related-empty {
  color: #8b93a3;
  text-align: center;
}

.related-actions {
  width: 96px;
  white-space: nowrap;
}

.related-actions button {
  width: 32px;
  height: 30px;
  margin-right: 4px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}

.related-edit {
  background: #3b82f6;
}

.related-delete {
  background: #c0392b;
}

.related-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.info-sheet-single {
  margin-top: 24px;
  padding-bottom: 22px;
}

.info-sheet-single h2 i {
  color: #17a755;
}

.info-sheet-single .related-table {
  width: calc(100% - 48px);
  margin: 18px 24px 0;
}

.related-file {
  margin-top: 12px;
}

.related-modal .related-separate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  color: #1f2a44;
  font-weight: 700;
  cursor: pointer;
}

.credit-modal.related-modal .related-separate input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #17a755;
}

.related-table td,
.related-table th {
  min-width: 90px;
}

.related-table td:first-child,
.related-table th:first-child,
.related-table .related-actions {
  min-width: 0;
}

.related-dialog .related-separate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  font-weight: 700;
  cursor: pointer;
}

.related-dialog .related-separate input {
  width: auto;
  margin: 0;
}

.table-scroll {
  overflow-x: auto;
}

.info-sheet .credits-table {
  min-width: 1100px;
}

.credits-table td {
  white-space: nowrap;
}

.credit-modal {
  width: 780px;
  max-width: 94vw;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.credit-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.credit-modal form {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.credit-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: linear-gradient(90deg, #17a755, #128a46);
  color: #fff;
}

.credit-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 18px;
}

.credit-modal-head h3 {
  flex: 1;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}

.credit-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}

.credit-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.credit-modal-body {
  padding: 8px 24px 4px;
  overflow-y: auto;
  background: #f7f9fc;
}

.credit-modal fieldset {
  margin: 14px 0;
  padding: 14px 18px 16px;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  background: #fff;
}

.credit-modal legend {
  padding: 0 8px;
  color: #128a46;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.credit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.credit-field.wide {
  grid-column: span 2;
}

.credit-field label {
  display: block;
  margin-bottom: 6px;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
}

.credit-field label b {
  color: #dc2626;
}

.credit-modal input,
.credit-modal select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cfd6e3;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font: 400 15px var(--app-font);
}

.credit-modal input:focus,
.credit-modal select:focus {
  border-color: #17a755;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(23, 167, 85, 0.18);
}

.credit-joined {
  display: flex;
}

.credit-joined input {
  border-radius: 9px 0 0 9px;
}

.credit-joined select {
  width: 96px;
  flex: none;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: #f1f4f9;
  font-weight: 700;
}

.credit-unit {
  position: relative;
}

.credit-unit input {
  padding-right: 52px;
}

.credit-unit span {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-50%);
  pointer-events: none;
}

.credit-rate-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #eef8f1;
  color: #1f6b3a;
  font-size: 13px;
}

.credit-rate-hint b {
  font-weight: 800;
}

.credit-rate-hint.missing {
  background: #fff6e5;
  color: #8a5a00;
}

.credit-modal input:disabled {
  background: #f1f4f9;
  cursor: not-allowed;
}

.credit-rate-note {
  display: block;
  color: #6b7280;
  font-size: 12px;
}

.credit-modal .account-error {
  margin: 4px 0 10px;
}

.credit-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #e1e6ef;
  background: #fff;
}

.credit-cancel,
.credit-save {
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  font: 700 15px var(--app-font);
  cursor: pointer;
}

.credit-cancel {
  background: #eef0f4;
  color: #374151;
}

.credit-cancel:hover {
  background: #e2e6ee;
}

.credit-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #17a755;
  color: #fff;
}

.credit-save:hover {
  background: #128a46;
}

@media (max-width: 640px) {
  .credit-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .credit-field.wide {
    grid-column: auto;
  }
}

.related-dialog label {
  margin-top: 6px;
}

.related-dialog input {
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 12px;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  font: 400 15px var(--app-font);
}

.inn-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 6px;
}

.info-field .inn-tools label {
  margin: 0;
}

.inn-tools button {
  margin-left: auto;
}

#inn-status {
  order: 3;
  width: 100%;
}

.inn-tools button {
  display: inline-flex;
  padding: 4px 12px !important;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: #17a755;
  color: #fff;
  font: 700 13px var(--app-font);
  cursor: pointer;
}

.inn-tools button:hover {
  background: #128a46;
}

.inn-tools button:disabled {
  opacity: 0.6;
  cursor: wait;
}

#inn-status {
  font-size: 13px;
  font-weight: 700;
}

#inn-status.error {
  color: #b3261e;
}

#inn-status.success {
  color: #128a46;
}

.doc-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(23, 167, 85, 0.1);
  font-size: 14px;
}

.doc-current a {
  color: #128a46;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.doc-current span {
  color: #6b7280;
}

.doc-current .doc-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 0 auto;
  color: #b3261e;
  font-weight: 700;
  cursor: pointer;
}

.info-sheet .doc-remove input {
  width: auto;
}

.doc-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 6px;
  border: 1px dashed #aab4c6;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.doc-picker:hover {
  border-color: var(--accent);
}

.doc-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.doc-picker:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 120, 234, 0.2);
}

.doc-button {
  flex: none;
  padding: 7px 14px;
  border-radius: 6px;
  background: #e8ecf6;
  color: #1f2a44;
  font-size: 14px;
  font-weight: 700;
}

.doc-name {
  overflow: hidden;
  color: #8b93a3;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-name.chosen {
  color: var(--text);
  font-weight: 700;
}

.doc-error {
  margin: 6px 0 0;
  color: #b3261e;
  font-size: 13px;
  font-weight: 700;
}

.panel-placeholder {
  margin: 0;
  color: #6b7280;
}

/* Profile */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 360px;
  margin-left: 12px;
  padding: 5px 16px 5px 8px;
  border: 2px solid #c9a24b;
  border-radius: 12px;
  background: #1b1d22;
  color: #fff;
  text-decoration: none;
}

.user-chip:hover {
  background: #2a2d34;
}

.user-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 2px solid #2b2b2b;
  border-radius: 50%;
  background: #e0a33e;
  color: #1b1d22;
  font-size: 18px;
  font-weight: 800;
}

.user-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.user-name,
.user-position {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-name {
  font-size: 15px;
  font-weight: 800;
}

.user-position {
  color: #e0a33e;
  font-size: 14px;
  font-weight: 700;
}

.user-avatar img,
.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: 30px;
}

.profile-side {
  display: grid;
  gap: 30px;
}

.profile-card {
  padding: 24px 25px 28px;
  border-radius: 14px;
  background: var(--page-bg);
}

.profile-summary {
  text-align: center;
}

.profile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 6px;
  overflow: hidden;
  border-radius: 50%;
  color: #9aa5c0;
  font-size: 96px;
}

.profile-summary h1 {
  margin: 0;
  color: var(--accent);
  font-size: 19px;
  font-weight: 600;
}

.profile-position {
  min-height: 18px;
  margin: 2px 0 18px;
  font-size: 13px;
  font-weight: 600;
}

.profile-summary dl {
  margin: 0;
  text-align: left;
}

.profile-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
}

.profile-summary dd {
  margin: 0;
  color: #8b93a3;
  overflow-wrap: anywhere;
  text-align: right;
}

.profile-card.profile-edit h2 {
  margin: -24px -25px 24px;
  padding: 16px 25px;
  border-bottom: 1px solid #eef0f4;
  color: var(--text);
  font-size: 18px;
}

.profile-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 30px;
}

.profile-field.wide {
  grid-column: 1 / -1;
}

.profile-field.required label::after {
  content: " *";
  color: #dc2626;
}

.profile-card textarea {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 13px;
  border: 1px solid #3f8f3f;
  border-radius: 5px;
  font: 400 15px var(--app-font);
  resize: vertical;
}

.profile-card textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.profile-actions {
  text-align: right;
}

@media (max-width: 1100px) {
  .profile-layout,
  .profile-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.profile-card h2 {
  margin: 0 0 16px;
  color: var(--primary);
  font-size: 19px;
}

.profile-card label {
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
}

.profile-card input:not([type="hidden"]) {
  width: 100%;
  margin-bottom: 14px;
  padding: 10px 13px;
  border: 1px solid #3f8f3f;
  border-radius: 5px;
  font: 400 15px var(--app-font);
}

.profile-card input:disabled {
  border-color: #d1d5db;
  background: #f3f4f6;
  color: #6b7280;
}

.profile-card input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.profile-card button {
  padding: 11px 22px;
  border: 0;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font: 700 15px var(--app-font);
  cursor: pointer;
}

.profile-card button:hover {
  background: #5763d8;
}

.errorlist {
  margin: 0 0 6px;
  padding: 0;
  color: #b3261e;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}

.notice {
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}

.notice-success {
  background: #e7f6ec;
  color: #1b6e3c;
}

.notice-error {
  background: #fdecea;
  color: #b3261e;
}

/* Calculator */
.calculator {
  width: 320px;
  padding: 18px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.calculator::backdrop {
  background: rgba(20, 25, 40, 0.5);
}

.calc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 800;
}

.calc-close {
  border: 0;
  background: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
}

.calc-history {
  min-height: 20px;
  color: #6b7280;
  font-size: 14px;
  text-align: right;
}

.calc-display {
  display: block;
  margin-bottom: 12px;
  padding: 8px 10px;
  overflow-x: auto;
  border-radius: 6px;
  background: #f1f4fc;
  font-size: 26px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.calc-keys button {
  padding: 13px 0;
  border: 0;
  border-radius: 6px;
  background: #eef0f4;
  color: var(--text);
  font: 700 18px var(--app-font);
  cursor: pointer;
}

.calc-keys button:hover {
  filter: brightness(0.94);
}

.calc-keys .calc-fn {
  background: #dfe3ec;
}

.calc-keys .calc-op,
.calc-keys .calc-equals {
  background: var(--accent);
  color: #fff;
}

.calc-keys .calc-wide {
  grid-column: span 2;
}

/* Chat */
.chat-window {
  --chat-bar: #060606;
  max-width: 1340px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #1f2125;
  border-radius: 14px;
  background: #e4ebfb;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.chat-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--chat-bar);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.chat-titlebar span {
  flex: 1;
}

.chat-titlebar button,
.chat-titlebar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #2c2f35;
  border-radius: 10px;
  background: #1a1c20;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.chat-titlebar button:hover,
.chat-titlebar a:hover {
  background: #2d3036;
}

.chat-window.minimized .chat-body {
  display: none;
}

.chat-body {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  height: calc(100vh - 240px);
  min-height: 460px;
  margin: 14px;
  overflow: hidden;
  border: 1px solid #c3cfe8;
  border-radius: 14px;
}

.chat-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #c3cfe8;
  background: #e3e9f4;
}

.chat-sidebar-head {
  padding: 16px 18px 18px;
  background: #fff;
}

.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.chat-toolbar h2 {
  flex: 1;
  margin: 0;
  font-size: 19px;
}

.chat-toolbar button {
  width: 39px;
  height: 39px;
  border: 1px solid #c3cbdb;
  border-radius: 11px;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}

.chat-toolbar button:hover {
  background: #eef2fb;
}

.chat-toolbar button[aria-pressed="true"] {
  border-color: #dc2626;
  background: #fdecea;
}

#chat-new-group { color: #2f6db5; }
#chat-broadcast { color: #6d28d9; }
#chat-unread-only { color: #dc2626; }

.chat-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid #d3d9e5;
  border-radius: 10px;
  color: #8b93a3;
}

.chat-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font: 400 15px var(--app-font);
}

.chat-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-top: 1px solid #c3cfe8;
  border-bottom: 2px solid #c3cfe8;
}

.chat-tabs button {
  position: relative;
  margin-bottom: -2px;
  padding: 12px 24px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #6b7280;
  font: 800 14px var(--app-font);
  cursor: pointer;
}

.chat-tabs button.active {
  border-bottom-color: #e0a33e;
  color: #c9761e;
}

.chat-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e0455a;
}

.chat-items {
  flex: 1;
  overflow-y: auto;
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid #cfd8ea;
  background: none;
  color: var(--text);
  font-family: var(--app-font);
  text-align: left;
  cursor: pointer;
}

.chat-item:hover {
  background: #d9e1f1;
}

.chat-item.active {
  background: #cbd6ee;
}

.chat-item .user-avatar {
  width: 52px;
  height: 52px;
  border-color: #fff;
}

.chat-item-text {
  flex: 1;
  min-width: 0;
}

.chat-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.chat-item-name,
.chat-item-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-name {
  font-size: 15px;
  font-weight: 800;
}

.chat-item-time {
  flex: none;
  color: #6b7280;
  font-size: 13px;
}

.chat-item-preview {
  color: #6b7280;
  font-size: 13px;
}

.chat-none {
  margin: 24px;
  color: #6b7280;
  text-align: center;
}

.chat-unread {
  flex: none;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 11px;
  background: #e0455a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.chat-main {
  min-height: 0;
  background: #f8fafd;
}

.chat-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
}

.chat-placeholder[hidden],
.chat-dialog[hidden] {
  display: none;
}

.chat-placeholder i {
  color: #a3a7b0;
  font-size: 66px;
}

.chat-placeholder h3 {
  margin: 14px 0 6px;
  font-size: 19px;
}

.chat-placeholder p {
  margin: 0;
  color: #9aa1af;
}

.chat-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-head {
  padding: 15px 20px;
  border-bottom: 1px solid #dfe5f1;
  background: #fff;
  font-size: 17px;
  font-weight: 800;
}

.chat-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.chat-bubble {
  align-self: flex-start;
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-bubble.mine {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}

.chat-bubble-sender {
  display: block;
  color: #c9761e;
  font-size: 13px;
  font-weight: 800;
}

.chat-bubble time {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.7;
  text-align: right;
}

.chat-form {
  position: relative;
  padding: 12px 20px;
  border-top: 1px solid #dfe5f1;
  background: #fff;
}

.chat-compose {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-compose textarea {
  flex: 1;
  min-width: 0;
  max-height: 110px;
  padding: 10px 18px;
  border: 1px solid #c3cfe8;
  border-radius: 21px;
  background: #e3e9f4;
  font: 400 15px var(--app-font);
  resize: none;
}

.chat-compose textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chat-attach,
.chat-emoji,
.chat-send {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

.chat-attach {
  background: none;
  color: #8b93a3;
}

.chat-attach:hover {
  background: #eef2fb;
}

.chat-emoji {
  background: #c9d4e8;
  color: #c9761e;
  font-size: 24px;
}

.chat-send {
  background: #e0a33e;
  color: #1b1d22;
}

.chat-send:hover {
  background: #c98d2a;
}

.chat-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eef2fb;
  font-size: 14px;
}

.chat-attachment[hidden] {
  display: none;
}

.chat-attachment span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment button {
  border: 0;
  background: none;
  color: #6b7280;
  cursor: pointer;
}

.emoji-panel {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 64px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: 384px;
  height: 350px;
  overflow: hidden;
  border: 1px solid #c3cfe8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.emoji-panel[hidden] {
  display: none;
}

.emoji-tabs {
  display: flex;
  background: #e3e9f4;
}

.emoji-tabs button {
  flex: 1;
  padding: 9px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

.emoji-tabs button.active {
  border-bottom-color: #e0a33e;
  background: #fff;
}

.emoji-title {
  padding: 10px 12px 4px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.emoji-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-content: start;
  padding: 4px 8px 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.emoji-grid button {
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 25px;
  cursor: pointer;
}

.emoji-grid button:hover {
  background: #eef2fb;
}

.chat-image {
  display: block;
  margin-bottom: 4px;
}

.chat-image img {
  display: block;
  max-width: 280px;
  max-height: 240px;
  border-radius: 8px;
}

.chat-file {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  color: inherit;
  font-weight: 700;
}

.chat-modal button[type="submit"] {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: 700 15px var(--app-font);
  cursor: pointer;
}

.chat-themes {
  position: fixed;
  inset: 120px auto auto 24px;
  width: 372px;
  max-height: calc(100vh - 140px);
  margin: 0;
  padding: 14px 16px 16px;
  overflow-y: auto;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.chat-themes h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}

.chat-themes h4:not(:first-child) {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.chat-swatches {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.chat-swatches button {
  height: 30px;
  padding: 0;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  cursor: pointer;
}

.chat-swatches button:hover {
  transform: scale(1.1);
}

.chat-swatches button.active {
  border: 2px solid #17a755;
  box-shadow: 0 0 0 2px rgba(23, 167, 85, 0.35);
}

.chat-custom-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}

.chat-custom-color input {
  width: 46px;
  height: 30px;
  padding: 2px;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.chat-look-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 8px 12px;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  background: #f6f7fa;
  color: #374151;
  font-weight: 700;
  cursor: pointer;
}

.chat-modal {
  width: 400px;
  max-width: 92vw;
  padding: 20px 22px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.chat-modal::backdrop {
  background: rgba(20, 25, 40, 0.5);
}

.chat-modal h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.chat-modal label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}

.chat-modal input[name="name"],
.chat-modal textarea {
  width: 100%;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  font: 400 15px var(--app-font);
}

.chat-modal fieldset {
  max-height: 220px;
  margin: 0 0 12px;
  padding: 8px 12px;
  overflow-y: auto;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
}

.chat-modal fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.chat-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.chat-modal button[data-close] {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #eef0f4;
  font: 700 15px var(--app-font);
  cursor: pointer;
}

@media (max-width: 900px) {
  .chat-body {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
}

/* Notifications */
.chat-window.minimized .payments-body {
  display: none;
}

.payments-body {
  min-height: calc(100vh - 212px);
  padding: 24px 28px;
  background: #dfe8fb;
}

.payments-head {
  display: flex;
  gap: 22px;
  margin-bottom: 24px;
}

.payments-back {
  padding-top: 6px;
  color: #5b6472;
  font-size: 22px;
}

.payments-head h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
}

.payments-head p {
  margin: 0;
  color: #6b7280;
}

.payments-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.payments-filters a {
  padding: 9px 18px;
  border: 1px solid #c3cbdb;
  border-radius: 19px;
  background: #fff;
  color: #4b5563;
  font-weight: 800;
  text-decoration: none;
}

.payments-filters a:hover {
  background: #f1f4fc;
}

.payments-filters a.active {
  border-color: #17181c;
  background: #17181c;
  color: #fff;
}

.payments-list {
  overflow: hidden;
  border-radius: 12px;
  background: var(--page-bg);
}

.payments-empty {
  margin: 0;
  padding: 34px;
  color: #6b7280;
  text-align: center;
}

.notification {
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f4;
}

.notification.unread {
  border-left: 3px solid var(--accent);
  background: #f1f4fc;
}

.notification h2 {
  margin: 0;
  font-size: 15px;
}

.notification p {
  margin: 4px 0;
  white-space: pre-wrap;
}

.notification time {
  color: #8b93a3;
  font-size: 13px;
}

/* Sign-in desk */
.desk-page {
  overflow: hidden;
}

.desk {
  position: relative;
  min-height: 100vh;
  background-color: #eceeee;
  background-position: center;
  background-size: cover;
  font-family: "Segoe UI", Tahoma, sans-serif;
}

.desk-toolbar {
  height: 36px;
  border-bottom: 1px solid #c9cccc;
  background: linear-gradient(#f7f7f7, #e9eaea);
}

.desk-banner {
  position: absolute;
  top: 74px;
  right: 0;
  z-index: 1;
  padding: 14px 56px 14px 44px;
  background: linear-gradient(#5f9283, #4c7e70);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  color: #fff;
  font: 600 28px "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.desk-brand {
  position: absolute;
  /* Kept below the sign-in window on any screen height. */
  top: max(58vh, 470px);
  left: 50%;
  width: min(62vw, 900px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
}

.desk-dialog {
  position: absolute;
  top: 70px;
  left: 11%;
  z-index: 2;
  width: 460px;
  border: 1px solid #7f9db9;
  border-radius: 3px;
  background: #ece9d8;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
}

.desk-dialog header {
  padding: 8px 12px;
  background: linear-gradient(#d6e2f3, #b9cbe6);
  color: #1d2b44;
  font-size: 15px;
}

.desk-dialog-body {
  padding: 22px 20px 18px;
  border: 1px solid #fff;
  font-size: 15px;
}

.desk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.desk-row label {
  flex: none;
  color: #222;
  font-family: "Courier New", monospace;
  font-size: 16px;
}

.desk-row input {
  width: 100%;
  max-width: 250px;
  padding: 6px 8px;
  border: 1px solid #7f9db9;
  background: #fff;
  font: 16px "Courier New", monospace;
}

.desk-row input.desk-short {
  max-width: 170px;
  text-align: right;
}

.desk-row input:focus {
  outline: 1px solid #316ac5;
}

.desk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.desk-actions a {
  color: #1c4fa0;
  font-size: 14px;
}

.desk-actions button,
.desk-actions .desk-button {
  margin-left: auto;
  padding: 7px 26px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(#fff, #e3e2da);
  color: #000;
  font: 14px "Segoe UI", Tahoma, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.desk-actions button:hover,
.desk-actions .desk-button:hover {
  background: linear-gradient(#fff, #fbe7b5);
}

.desk-note {
  margin: 0 0 16px;
  color: #222;
  line-height: 1.4;
}

.desk-error {
  margin: 0 0 10px;
  padding: 5px 8px;
  border: 1px solid #e3a3a3;
  background: #fdecea;
  color: #a4161a;
  font-size: 14px;
}

.desk-stripes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 12px;
}

.desk-stripes span:nth-child(1) {
  flex: 1;
  background: #f2cf4c;
}

.desk-stripes span:nth-child(2) {
  flex: 1;
  background: #ecae47;
}

.desk-stripes span:nth-child(3) {
  flex: 1;
  background: #e79a4a;
}

@media (max-width: 1100px) {
  .desk-banner {
    top: auto;
    bottom: 40px;
    padding: 10px 28px;
    font-size: 20px;
  }
}

@media (max-width: 800px) {
  .desk-dialog {
    left: 50%;
    transform: translateX(-50%);
  }

  .desk-banner {
  position: absolute;
  top: 74px;
  right: 0;
  z-index: 1;
  padding: 14px 56px 14px 44px;
  background: linear-gradient(#5f9283, #4c7e70);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  color: #fff;
  font: 600 28px "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.desk-brand {
    top: 70%;
    width: 86vw;
  }
}

/* Login */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 34px 32px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.login-logo {
  display: block;
  width: 240px;
  max-width: 100%;
  margin: 6px auto 0;
}

.login-subtitle {
  margin: 14px 0 22px;
  color: #6b7280;
}

.login-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fdecea;
  color: #b3261e;
  font-size: 14px;
  font-weight: 600;
}

.login-card form {
  text-align: left;
}

.login-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
}

.login-card input {
  width: 100%;
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid #3f8f3f;
  border-radius: 5px;
  font: 400 15px var(--app-font);
}

.login-card input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.login-card button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font: 700 16px var(--app-font);
  cursor: pointer;
}

.login-card button:hover {
  background: #5763d8;
}

.org-bar em.chosen {
  color: #174a43;
  font-style: normal;
  font-weight: 800;
}

.phones-table td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

/* Larger text on the Info page and its dialogs, easier to read for employees. */
.info-card h2 { font-size: 19px; }
.info-card h2 span { width: 32px; height: 32px; font-size: 16px; }
.info-card h3,
.accounts-head h3,
.founders h3,
.collaterals h3 { font-size: 17px; }
.info-field label { color: #374151; font-size: 15px; }
.info-sheet input,
.info-sheet textarea { font-size: 17px; }
.info-table th { font-size: 14.5px; }
.info-table td,
.related-table td { font-size: 16px; }
.phones-table td { font-size: 17px; }
.phones-table .related-empty { font-size: 15px; }
.phones-head button { font-size: 14px; }
.related-add,
.accounts-add { font-size: 15.5px; }
.related-badge { font-size: 13px; }
.account-title { font-size: 17px; }
.account-meta { font-size: 14.5px; }
.account-main { font-size: 15.5px; }
.account-badge { font-size: 13px; }
.account-error,
.doc-error { font-size: 14.5px; }
.doc-current,
.doc-button,
.doc-name { font-size: 15.5px; }
.collateral-detail { font-size: 14.5px; }
.collateral-current { font-size: 15px; }
.founders-summary { font-size: 16px; }
.charter-lock { font-size: 13.5px; }
.info-actions span { font-size: 15px; }
.info-actions button,
.info-actions .pdf-download { font-size: 16px; }
.credit-field label { font-size: 14.5px; }
.credit-modal input,
.credit-modal select,
.credit-modal textarea { font-size: 16.5px; }
.credit-modal-head h3 { font-size: 21px; }
.credit-modal legend { font-size: 14px; }
.credit-unit span { font-size: 15px; }
.founder-note,
.credit-rate-hint { font-size: 14px; }
.phone-choice { font-size: 16px; }

/* "Choose file" buttons in the brand green. */
/* A raised button: light top edge, darker base and a shadow; it sinks when pressed. */
.doc-button {
  position: relative;
  border: 1px solid #a9dcbd;
  background: linear-gradient(180deg, #eefaf3 0%, #d3f0de 55%, #bfe7cf 100%);
  color: #11733b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 #8fcfa8,
    0 5px 8px rgba(17, 115, 59, 0.22);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}

.doc-picker:hover .doc-button,
.doc-picker:focus-within .doc-button {
  background: linear-gradient(180deg, #e4f7ec 0%, #c5ebd4 55%, #afe0c2 100%);
}

.doc-picker:active .doc-button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 #8fcfa8,
    0 2px 3px rgba(17, 115, 59, 0.2);
  transform: translateY(0);
}

.doc-picker:hover,
.doc-picker:focus-within {
  border-color: #17a755;
}

.doc-picker:focus-within {
  box-shadow: 0 0 0 3px rgba(23, 167, 85, 0.18);
}

/* Raised 3D buttons on the Info page and its dialogs: a light top edge, a darker
   base under the button and a soft shadow; pressing sinks the button onto its base. */

.related-add,
.phones-head button,
#inn-fill,
.info-actions button,
.credit-save {
  border: 1px solid #0f7a3c;
  border-style: solid;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #0b6431,
    0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.related-add:hover,
.phones-head button:hover,
#inn-fill:hover,
.info-actions button:hover,
.credit-save:hover {
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  filter: brightness(1.06);
}

.related-add:active,
.phones-head button:active,
#inn-fill:active,
.info-actions button:active,
.credit-save:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 #0b6431,
    0 2px 3px rgba(15, 23, 42, 0.2);
  transform: translateY(1px);
}

.related-edit {
  border: 1px solid #2a5fc4;
  border-style: solid;
  background: linear-gradient(180deg, #5b9bff 0%, #2f6fe0 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #1d4aa0,
    0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.related-edit:hover {
  background: linear-gradient(180deg, #5b9bff 0%, #2f6fe0 100%);
  color: #fff;
  filter: brightness(1.06);
}

.related-edit:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 #1d4aa0,
    0 2px 3px rgba(15, 23, 42, 0.2);
  transform: translateY(1px);
}

.related-delete {
  border: 1px solid #9c2e24;
  border-style: solid;
  background: linear-gradient(180deg, #e25a4b 0%, #b3352a 100%);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #7a221a,
    0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.related-delete:hover {
  background: linear-gradient(180deg, #e25a4b 0%, #b3352a 100%);
  color: #fff;
  filter: brightness(1.06);
}

.related-delete:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 #7a221a,
    0 2px 3px rgba(15, 23, 42, 0.2);
  transform: translateY(1px);
}

.accounts-add {
  border: 1px solid #a9c1f0;
  border-style: solid;
  background: linear-gradient(180deg, #f6f9ff 0%, #d9e6ff 100%);
  color: #2f5fd0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #93ade3,
    0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.accounts-add:hover {
  background: linear-gradient(180deg, #f6f9ff 0%, #d9e6ff 100%);
  color: #2f5fd0;
  filter: brightness(1.06);
}

.accounts-add:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 #93ade3,
    0 2px 3px rgba(15, 23, 42, 0.2);
  transform: translateY(1px);
}

.accounts-head button,
.info-actions .pdf-download {
  border: 1px solid #b9c3d4;
  border-style: solid;
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf2 100%);
  color: #174a43;
  text-shadow: 0 1px 0 #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #a3afc2,
    0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.accounts-head button:hover,
.info-actions .pdf-download:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf2 100%);
  color: #174a43;
  filter: brightness(1.06);
}

.accounts-head button:active,
.info-actions .pdf-download:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 #a3afc2,
    0 2px 3px rgba(15, 23, 42, 0.2);
  transform: translateY(1px);
}

.credit-cancel {
  border: 1px solid #bcc4d1;
  border-style: solid;
  background: linear-gradient(180deg, #f6f7fa 0%, #dde2ea 100%);
  color: #374151;
  text-shadow: 0 1px 0 #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #a7b0bf,
    0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.credit-cancel:hover {
  background: linear-gradient(180deg, #f6f7fa 0%, #dde2ea 100%);
  color: #374151;
  filter: brightness(1.06);
}

.credit-cancel:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 #a7b0bf,
    0 2px 3px rgba(15, 23, 42, 0.2);
  transform: translateY(1px);
}

.info-actions .pdf-download:hover i {
  color: #c0392b;
}

/* Room for the raised base below buttons that sit in rows. */
.related-actions button {
  margin-bottom: 4px;
}

.related-add,
.accounts-add {
  margin-bottom: 16px;
}

.credit-modal-close {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 0 rgba(0, 0, 0, 0.18),
    0 5px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  transition: transform 0.08s, box-shadow 0.08s;
}

.credit-modal-close:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(1px);
}

/* display: flex above would otherwise show the hidden, empty rate line. */
.credit-rate-hint[hidden] {
  display: none;
}

/* "Load credit base" on the right of the first section header: pale orange, raised. */
.credit-base-status {
  margin-left: auto;
  color: #9a4a00;
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
}

.credit-base-status:empty {
  display: none;
}

.credit-base-upload {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 18px;
  border: 1px solid #f3b47a;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff3e6 0%, #ffd9b3 100%);
  color: #9a4a00;
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 0 #e59a55,
    0 6px 10px rgba(154, 74, 0, 0.2);
  cursor: pointer;
  transform: translateY(-2px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.credit-base-status:not(:empty) + .credit-base-upload {
  margin-left: 0;
}

.credit-base-upload:hover {
  filter: brightness(1.04);
}

.credit-base-upload:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 #e59a55,
    0 2px 3px rgba(154, 74, 0, 0.2);
  transform: translateY(1px);
}

.credit-base-upload:focus-within {
  outline: 2px solid #e59a55;
  outline-offset: 2px;
}

.credit-base-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.credit-base-upload i {
  color: #e07b1a;
}

.file-link {
  color: #128a46;
  font-weight: 700;
  white-space: nowrap;
}

.file-link i {
  margin-right: 2px;
}


/* The chat as a window over the current page. */
.chat-overlay {
  position: fixed;
  z-index: 60;
  top: 82px;
  right: 20px;
  left: 20px;
  max-width: 1340px;
  height: calc(100vh - 100px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.chat-overlay[hidden] {
  display: none;
}

.chat-overlay iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.chat-overlay.minimized {
  top: auto;
  right: 16px;
  bottom: 16px;
  left: auto;
  width: 420px;
  height: 64px;
}

body.chat-frame {
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.chat-frame .chat-window {
  display: flex;
  flex-direction: column;
  max-width: none;
  height: 100vh;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

.chat-frame .chat-body {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* Who is online, and since when the others are away. */
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
}

.chat-head .user-avatar {
  width: 44px;
  height: 44px;
}

.chat-head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.chat-status {
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 600;
}

.chat-status.online,
.chat-online {
  color: #16a34a;
  font-weight: 800;
}

.chat-online {
  flex: none;
  margin-right: auto;
  font-size: 12px;
}

.chat-item .user-avatar {
  position: relative;
  overflow: visible;
}

.chat-item .user-avatar img {
  border-radius: 50%;
}

.chat-item .user-avatar.online::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #22c55e;
  content: "";
}

.chat-item-seen {
  display: block;
  color: #8b93a3;
  font-size: 11.5px;
}

/* A conversation with an unsent, typed message. */
.chat-item.draft {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
}

.chat-item.draft .chat-item-name {
  color: #b91c1c;
}

.chat-item.draft .chat-item-preview {
  color: #dc2626;
  font-weight: 700;
}

/* One tick: delivered; two ticks: read. */
.chat-ticks {
  margin-left: 6px;
  font-size: 11px;
}

.chat-ticks.read {
  color: #bbf7d0;
}

/* Backgrounds the employee picks for the chat. */
.chat-main {
  background: var(--chat-log-bg, #f8fafd);
}

.chat-sidebar {
  background: var(--chat-list-bg, #e3e9f4);
}

/* Send button: brand green, raised. */
.chat-send {
  border: 1px solid #0f7a3c;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 0 #0b6431,
    0 5px 8px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}

.chat-send:hover {
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  filter: brightness(1.07);
}

.chat-send:active {
  box-shadow: 0 1px 0 #0b6431;
  transform: translateY(1px);
}

.charter-lock {
  transition: opacity 0.6s;
}

.charter-lock.fading {
  opacity: 0;
}

/* "Analysis type" in the first section header, before the credit base button. */
.analysis-type {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: #1f2a44;
  font-size: 15px;
  font-weight: 800;
}

.analysis-type select {
  min-width: 200px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #b9c3d4;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  color: #1f2a44;
  font: 700 15px var(--app-font);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c7d0dd;
  cursor: pointer;
}

.analysis-type select:focus {
  border-color: #17a755;
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 167, 85, 0.18);
}

.analysis-type ~ .credit-base-status,
.analysis-type ~ .credit-base-upload {
  margin-left: 0;
}

.analysis-type ~ .credit-base-status:not(:empty) {
  margin-left: 6px;
}

/* Business history: title with the "add period" button, a delete button per row. */
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px;
}

.history-head h3 {
  margin: 0;
}

.history-head .related-add {
  margin: 10px 0 14px;
}

.history-table .history-actions {
  width: 52px;
  padding-right: 0;
  text-align: right;
  vertical-align: middle;
}

.history-table .history-actions button {
  width: 34px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
}

/* Birth date with the age beside it. */
.birth-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.birth-field input {
  flex: 1;
}

.age-badge {
  flex: none;
  padding: 8px 14px;
  border: 1px solid #a9dcbd;
  border-radius: 8px;
  background: #e8f7ee;
  color: #11733b;
  font-size: 16px;
  font-weight: 800;
}

.age-badge[hidden] {
  display: none;
}

/* Drop-down with colored icons (icon_select.js). */
.icon-select-wrap {
  position: relative;
  font: 600 15px var(--app-font);
}

.icon-select-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  height: 42px;
  padding: 0 12px 0 7px;
  border: 1px solid #c3cbdb;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f9 100%);
  color: #1f2a44;
  font: 700 15px var(--app-font);
  text-align: left;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #cbd3e0, 0 5px 10px rgba(15, 23, 42, 0.1);
  cursor: pointer;
  transform: translateY(-1px);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.icon-select-button:hover,
.icon-select-wrap.open .icon-select-button {
  border-color: #17a755;
}

.icon-select-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 167, 85, 0.25), 0 3px 0 #cbd3e0;
}

.icon-select-button em,
.icon-select-menu em {
  flex: 1;
  font-style: normal;
  white-space: nowrap;
}

.icon-select-button.empty em {
  color: #6b7280;
  font-weight: 600;
}

.icon-select-caret {
  color: #64748b;
  font-size: 12px;
  transition: transform 0.2s;
}

.icon-select-wrap.open .icon-select-caret {
  transform: rotate(180deg);
}

.icon-bubble {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c);
  font-size: 14px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, #fff);
}

.icon-select-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
}

.icon-select-menu[hidden] {
  display: none;
}

.icon-select-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #1f2a44;
  cursor: pointer;
}

.icon-select-menu li:hover,
.icon-select-menu li:focus {
  outline: none;
  background: #f1f5f9;
}

.icon-select-menu li.chosen {
  background: #ecfdf3;
  color: #11733b;
  font-weight: 800;
}

.icon-select-tick {
  visibility: hidden;
  color: #16a34a;
  font-size: 13px;
}

.icon-select-menu li.chosen .icon-select-tick {
  visibility: visible;
}

/* Link from the case pages back to the case list. */
.org-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cases-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 7px 16px;
  border: 1px solid #b9c3d4;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf2 100%);
  color: #174a43;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #a3afc2, 0 5px 8px rgba(15, 23, 42, 0.15);
}

.cases-link i {
  color: #e0a33e;
}

.cases-link:active {
  box-shadow: 0 1px 0 #a3afc2;
  transform: translateY(2px);
}

/* The case list. */
.cases-card {
  margin-top: 24px;
}

.cases-card h2 {
  font-size: 20px;
}

.cases-icon {
  color: #e0a33e;
  font-size: 22px;
}

.cases-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 18px;
  border: 1px solid #0f7a3c;
  border-radius: 9px;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #0b6431, 0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
}

.cases-new:active {
  box-shadow: 0 1px 0 #0b6431;
  transform: translateY(1px);
}

.cases-card .table-scroll {
  padding: 18px 24px 24px;
}

.cases-table {
  width: 100%;
}

.cases-table td {
  vertical-align: top;
}

.cases-sub {
  display: block;
  color: #6b7280;
  font-size: 13px;
}

.cases-line {
  display: block;
  line-height: 1.9;
}

.cases-nowrap {
  white-space: nowrap;
}

.currency-chip,
.collateral-chip {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

.currency-chip {
  background: #e0ecff;
  color: #1d4ed8;
}

.collateral-chip {
  margin: 0 4px 4px 0;
  background: #fef3c7;
  color: #92400e;
}

.cases-actions {
  width: 100px;
  white-space: nowrap;
}

.cases-actions a {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 32px;
  margin-right: 4px;
  border-radius: 6px;
  text-decoration: none;
}

.case-view {
  border: 1px solid #0f7a3c;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #0b6431, 0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
}

.case-view:active {
  box-shadow: 0 1px 0 #0b6431;
  transform: translateY(1px);
}

.cases-table tr.just-saved td {
  background: #ecfdf3;
  animation: saved-flash 2.5s ease-out;
}

@keyframes saved-flash {
  from { background: #bbf7d0; }
  to { background: #ecfdf3; }
}

.info-sheet .cases-table,
.cases-table {
  width: 100%;
  margin: 0;
}

.cases-line {
  display: flex;
  align-items: center;
  height: 30px;
  line-height: 1;
}

/* Case list: white card, a raised 3D header row and a ruled table body. */
.cases-card {
  background: #fff;
}

.info-sheet .cases-table,
.cases-table {
  border: 1px solid #cfd8e6;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.cases-table thead th {
  position: relative;
  padding: 13px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 4px solid #0b6431;
  background: linear-gradient(180deg, #2fbf6f 0%, #168f4a 55%, #127a3e 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}

.cases-table thead th:first-child {
  border-top-left-radius: 11px;
}

.cases-table thead th:last-child {
  border-right: 0;
  border-top-right-radius: 11px;
}

.cases-table tbody td {
  padding: 12px;
  border-top: 0;
  border-right: 1px solid #e3e8f2;
  border-bottom: 1px solid #e3e8f2;
  background: #fff;
}

.cases-table tbody td:last-child {
  border-right: 0;
}

.cases-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.cases-table tbody tr:hover td {
  background: #f0faf4;
}

.cases-table tbody tr:last-child td {
  border-bottom: 0;
}

.cases-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 11px;
}

.cases-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 11px;
}

.cases-number {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.schedule-chip {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 10px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 800;
}

.cases-card h2 {
  background: #fff;
}

.cases-table td:nth-child(2) {
  min-width: 180px;
}

.collateral-chip {
  white-space: nowrap;
}

.cases-actions {
  width: 140px;
}

.case-delete-form {
  display: inline;
  margin: 0;
}

.cases-actions .related-delete {
  width: 34px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
}

/* ===== Internal mail ===== */
#chat-unread-only { color: #6b7280; }

.chat-mail-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid #c3cbdb;
  border-radius: 11px;
  background: #fff;
  color: #dc2626;
  font-size: 16px;
  text-decoration: none;
}

.chat-mail-link:hover {
  background: #fdecea;
}

.chat-mail-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}

.chat-mail-badge[hidden] {
  display: none;
}

.mail-window {
  --mail-accent: #5b4fc8;
  --mail-accent-soft: #eeecfb;
  display: flex;
  flex-direction: column;
  max-width: 1600px;
  height: calc(100vh - 110px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.chat-frame .mail-window {
  max-width: none;
  height: 100vh;
  border-radius: 14px;
}

.mail-window.minimized .mail-toolbar,
.mail-window.minimized .mail-body {
  display: none;
}

.mail-top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid #ececf3;
}

.mail-top h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}

.mail-top h1 i {
  color: var(--mail-accent);
}

.mail-search {
  display: flex;
  flex: 1;
  max-width: 600px;
  margin: 0 auto;
}

.mail-search input {
  flex: 1;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #d6d6e3;
  border-right: 0;
  border-radius: 19px 0 0 19px;
  font-size: 15px;
}

.mail-search input:focus {
  border-color: var(--mail-accent);
  outline: none;
}

.mail-search button {
  width: 48px;
  border: 0;
  border-radius: 0 19px 19px 0;
  background: var(--mail-accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.mail-window-buttons {
  display: flex;
  gap: 8px;
}

.mail-window-buttons a,
.mail-window-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #d6d6e3;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.mail-window-buttons a:hover,
.mail-window-buttons button:hover {
  background: var(--mail-accent-soft);
}

.mail-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid #ececf3;
}

.mail-tool {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #4b5563;
  font-size: 17px;
  cursor: pointer;
}

.mail-tool:hover:not(:disabled) {
  background: var(--mail-accent-soft);
  color: var(--mail-accent);
}

.mail-tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.mail-tool-danger {
  color: #dc2626;
}

.mail-compose-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-right: 10px;
  padding: 0 16px;
  border: 0;
  border-radius: 19px;
  background: var(--mail-accent-soft);
  color: var(--mail-accent);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.mail-compose-button:hover {
  background: #e1ddf8;
}

.mail-more {
  position: relative;
}

.mail-more-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.mail-more-menu[hidden] {
  display: none;
}

.mail-more-menu button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #1f2937;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.mail-more-menu button:hover {
  background: var(--mail-accent-soft);
}

.mail-notice {
  margin: 0 0 0 auto;
  color: #15803d;
  font-weight: 700;
}

.mail-notice.bad {
  color: #b91c1c;
}

.mail-body {
  display: grid;
  flex: 1;
  grid-template-columns: 220px minmax(320px, 0.9fr) minmax(0, 1.3fr);
  min-height: 0;
}

.mail-window.folders-hidden .mail-body {
  grid-template-columns: 0 minmax(320px, 0.9fr) minmax(0, 1.3fr);
}

.mail-window.folders-hidden .mail-folders {
  display: none;
}

.mail-folders {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  overflow-y: auto;
  border-right: 1px solid #ececf3;
  background: #fbfbfe;
}

.mail-folder {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #374151;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.mail-folder:hover {
  background: #f1f0fa;
}

.mail-folder.active {
  background: #e8e6f6;
  color: #1f2937;
  font-weight: 700;
}

.mail-folder span {
  flex: 1;
}

.mail-folder-icon { width: 20px; font-size: 17px; text-align: center; }
.mail-folder-inbox { color: var(--mail-accent); }
.mail-folder-sent { color: #3aa0e8; }
.mail-folder-postponed { color: #f59e0b; }
.mail-folder-drafts { color: #e8b400; }
.mail-folder-trash { color: #e11d48; }
.mail-folder-templates { color: #60a5fa; }

.mail-count {
  color: var(--mail-accent);
  font-size: 13px;
  font-weight: 800;
}

.mail-list-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #ececf3;
}

.mail-list-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #ececf3;
}

.mail-list-tools select {
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
}

.mail-list-tools select:last-child {
  margin-left: auto;
}

.mail-list-tools select:hover {
  background: #f3f4f6;
}

.mail-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 10px;
}

.mail-day {
  margin: 12px 8px 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ececf3;
  color: #4b5563;
  font-size: 13px;
  font-weight: 800;
}

.mail-empty {
  margin: 40px 0;
  color: #9ca3af;
  text-align: center;
}

.mail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  padding: 10px 12px 10px 18px;
  border-radius: 10px;
  cursor: pointer;
}

.mail-item:hover {
  background: #f4f3fb;
}

.mail-item:focus-visible {
  outline: 2px solid var(--mail-accent);
}

.mail-item.unread::before {
  position: absolute;
  left: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mail-accent);
  content: "";
}

.mail-item.active {
  background: var(--mail-accent);
  color: #fff;
}

.mail-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: #e9e7f7;
  color: var(--mail-accent);
  font-size: 17px;
  font-weight: 700;
}

.mail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mail-item-text {
  flex: 1;
  min-width: 0;
}

.mail-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mail-item-name {
  flex: 1;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-item.unread .mail-item-name,
.mail-item.unread .mail-item-subject {
  font-weight: 800;
}

.mail-item-time {
  flex: none;
  color: #6b7280;
  font-size: 13px;
}

.mail-item-clip {
  color: #6b7280;
  font-size: 13px;
}

.mail-item-subject,
.mail-item-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-item-subject {
  font-size: 14.5px;
}

.mail-item-preview {
  color: #6b7280;
  font-size: 13px;
}

.mail-item.active .mail-item-time,
.mail-item.active .mail-item-clip,
.mail-item.active .mail-item-preview {
  color: rgba(255, 255, 255, 0.85);
}

.mail-item.active .mail-avatar {
  background: rgba(255, 255, 255, 0.92);
}

.mail-item-star {
  align-self: flex-end;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  opacity: 0;
}

.mail-item:hover .mail-item-star,
.mail-item-star.on {
  opacity: 1;
}

.mail-item-star.on {
  color: #e11d48;
}

.mail-item.active .mail-item-star {
  color: #fff;
}

.mail-item.scheduled .mail-item-time::before {
  margin-right: 4px;
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  content: "\f017";
}

.mail-read {
  min-width: 0;
  overflow-y: auto;
}

.mail-read-empty {
  display: grid;
  place-items: center;
  align-content: center;
  height: 100%;
  color: #9ca3af;
}

.mail-read-empty i {
  font-size: 54px;
}

.mail-letter {
  padding: 18px 28px 30px;
}

.mail-letter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mail-letter-date {
  color: #6b7280;
  font-size: 14px;
}

.mail-letter-buttons {
  display: flex;
  gap: 8px;
}

.mail-secondary,
.mail-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #d6d6e3;
  border-radius: 17px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.mail-secondary:hover {
  border-color: var(--mail-accent);
  color: var(--mail-accent);
}

.mail-danger {
  border-color: #fecaca;
  color: #dc2626;
}

.mail-letter-subject {
  margin: 10px 0 14px;
  font-size: 22px;
  font-weight: 800;
}

.mail-letter-scheduled {
  margin: -6px 0 12px;
  color: #b45309;
  font-weight: 700;
}

.mail-letter-people {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.mail-letter-people .mail-avatar {
  width: 56px;
  height: 56px;
  font-size: 24px;
}

.mail-letter-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mail-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 14.5px;
}

.mail-line-label {
  min-width: 48px;
  color: #6b7280;
}

.mail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #374151;
}

.mail-chip-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
}

.mail-letter-body {
  font-size: 15.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mail-letter-files {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #ececf3;
}

.mail-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #1f2937;
  text-decoration: none;
}

.mail-file i {
  color: var(--mail-accent);
}

.mail-file small {
  color: #6b7280;
}

.mail-file:hover {
  border-color: var(--mail-accent);
}

/* Compose dialog */
.mail-compose {
  width: min(820px, 94vw);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.mail-compose::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.mail-compose form {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.mail-compose header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--mail-accent, #5b4fc8);
  color: #fff;
}

.mail-compose header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
}

.mail-compose-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
}

.mail-compose-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  overflow-y: auto;
}

.mail-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ececf3;
}

.mail-field label {
  width: 60px;
  color: #6b7280;
}

.mail-field > input {
  flex: 1;
  height: 38px;
  border: 0;
  font-size: 15px;
}

.mail-field > input:focus {
  outline: none;
}

.mail-people {
  position: relative;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 0;
  cursor: text;
}

.mail-people input {
  flex: 1;
  min-width: 160px;
  height: 30px;
  border: 0;
  font-size: 15px;
}

.mail-people input:focus {
  outline: none;
}

.mail-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 2px;
  border-radius: 16px;
  background: var(--mail-accent-soft, #eeecfb);
  font-size: 14px;
}

.mail-person.kept {
  padding: 4px 10px;
}

.mail-person .mail-avatar {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.mail-person-remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6b7280;
  cursor: pointer;
}

.mail-person-remove:hover {
  background: rgba(0, 0, 0, 0.08);
}

.mail-suggest {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  width: min(420px, 100%);
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.mail-suggest[hidden] {
  display: none;
}

.mail-suggest li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.mail-suggest li:hover {
  background: var(--mail-accent-soft, #eeecfb);
}

.mail-suggest .mail-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.mail-suggest small {
  margin-left: auto;
  color: #6b7280;
}

.mail-compose textarea {
  min-height: 220px;
  padding: 10px 0;
  border: 0;
  font: 400 15.5px var(--app-font);
  line-height: 1.6;
  resize: vertical;
}

.mail-compose textarea:focus {
  outline: none;
}

.mail-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mail-compose-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mail-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px dashed #b9b4e6;
  border-radius: 18px;
  color: #5b4fc8;
  font-weight: 700;
  cursor: pointer;
}

.mail-attach input {
  display: none;
}

.mail-when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 14px;
}

.mail-when input {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #d6d6e3;
  border-radius: 8px;
}

.mail-compose-error {
  min-height: 1em;
  margin: 0;
  color: #b91c1c;
  font-weight: 700;
}

.mail-compose footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #ececf3;
  background: #fafafe;
}

.mail-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 22px;
  border: 1px solid #0f7a3c;
  border-radius: 19px;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 0 #0b6431;
  cursor: pointer;
}

.mail-send:active {
  box-shadow: 0 1px 0 #0b6431;
  transform: translateY(2px);
}

/* Printing a letter prints only the letter. */
@media print {
  body * {
    visibility: hidden;
  }

  .mail-letter,
  .mail-letter * {
    visibility: visible;
  }

  .mail-letter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .mail-letter-buttons {
    display: none;
  }
}

.mail-read-empty[hidden],
.mail-letter[hidden] {
  display: none;
}

/* Main documents: the picker, then the attached files in a row, each with an ×. */
.doc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px dashed #aab4c6;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
}

.doc-row .doc-picker.doc-multi {
  padding: 0;
  border: 0;
  background: none;
}

.doc-files {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.doc-hint {
  color: #8b93a3;
  font-size: 14px;
}

.doc-hint[hidden] {
  display: none;
}

.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  border: 1px solid #cfe9d8;
  border-radius: 16px;
  background: #f0faf4;
  font-size: 14px;
}

.doc-chip a,
.doc-chip > span {
  overflow: hidden;
  color: #11733b;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-chip a:hover {
  text-decoration: underline;
}

.doc-chip small {
  flex: none;
  color: #6b7280;
}

.doc-chip.pending {
  border-style: dashed;
  border-color: #f3b47a;
  background: #fff7ed;
}

.doc-chip.pending > span {
  color: #9a4a00;
}

.doc-chip-remove {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  cursor: pointer;
}

.doc-chip-remove:hover {
  background: #dc2626;
  color: #fff;
}

/* "Back" in the bottom bar, and the unsaved-changes dialog. */
.info-actions .info-back {
  border: 1px solid #b9c3d4;
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf2 100%);
  color: #374151;
  text-shadow: 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #a3afc2, 0 6px 10px rgba(15, 23, 42, 0.15);
  transform: translateY(-2px);
}

.info-actions .info-back:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dde3ec 100%);
}

.info-actions .info-back:active {
  box-shadow: 0 1px 0 #a3afc2;
  transform: translateY(1px);
}

.unsaved-head {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.unsaved-text {
  margin: 14px 0 10px;
  color: #374151;
  font-size: 16px;
  line-height: 1.6;
}

/* View mode: the case is shown, nothing can be changed. */
.view-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 21px;
  background: linear-gradient(90deg, #e0ecff, #eef4ff);
  color: #1e3a8a;
  font-size: 15px;
  border-bottom: 1px solid #c7d7f5;
}

.view-banner > i {
  color: #2563eb;
  font-size: 18px;
}

.view-edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 7px 16px;
  border: 1px solid #2a5fc4;
  border-radius: 9px;
  background: linear-gradient(180deg, #5b9bff 0%, #2f6fe0 100%);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #1d4aa0, 0 6px 10px rgba(15, 23, 42, 0.2);
  transform: translateY(-2px);
}

.view-edit:active {
  box-shadow: 0 1px 0 #1d4aa0;
  transform: translateY(1px);
}

.view-edit-big {
  margin-left: 0;
  padding: 11px 26px;
  font-size: 16px;
}

.sheet-lock {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}

.info-sheet.readonly input,
.info-sheet.readonly textarea,
.info-sheet.readonly select {
  border-color: #e3e8f2;
  background: #f8fafc;
  color: #1f2937;
  cursor: default;
  opacity: 1;
}

.info-sheet.readonly .related-add,
.info-sheet.readonly .accounts-add,
.info-sheet.readonly .accounts-head button,
.info-sheet.readonly .related-actions,
.info-sheet.readonly .related-table th:last-child,
.info-sheet.readonly .doc-picker,
.info-sheet.readonly .doc-chip-remove,
.info-sheet.readonly .doc-hint,
.info-sheet.readonly .history-actions,
.info-sheet.readonly .history-table th:last-child,
.info-sheet.readonly .phones-head button,
.info-sheet.readonly #inn-fill,
.info-sheet.readonly .credit-base-upload {
  display: none;
}

.info-sheet.readonly .icon-select-button {
  cursor: default;
  opacity: 1;
}

.info-sheet.readonly .icon-select-caret {
  visibility: hidden;
}

/* Founders of a related company, added inside its dialog. */
.related-founders {
  margin: 14px 0 6px;
  padding: 12px 16px 14px;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  background: #fff;
}

.related-founders legend {
  padding: 0 8px;
  color: #128a46;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.related-founders > .credit-field {
  max-width: 340px;
}

.rf-add {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  gap: 8px;
  margin-top: 12px;
}

.rf-add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid #0f7a3c;
  border-radius: 9px;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 0 #0b6431;
  cursor: pointer;
}

.rf-add-button:active {
  box-shadow: 0 1px 0 #0b6431;
  transform: translateY(2px);
}

.rf-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 15px;
}

.rf-table th {
  padding: 7px 8px;
  border-bottom: 2px solid #17a755;
  color: #374151;
  font-size: 13px;
  text-align: left;
}

.rf-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #eef1f6;
}

.rf-table td:last-child {
  width: 40px;
  text-align: right;
}

.rf-empty {
  color: #8b93a3;
  text-align: center;
}

.rf-total {
  margin: 8px 0 0;
  color: #1f6b3a;
  font-weight: 800;
  text-align: right;
}

.rf-total:empty {
  display: none;
}

.related-founder-line {
  display: block;
  white-space: nowrap;
}

/* MFO, account and bank side by side in the related party dialog. */
.related-bank-row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 12px 18px;
}

/* "Unsaved changes were restored" after a reload. */
.draft-note {
  position: fixed;
  z-index: 40;
  bottom: 90px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid #f3b47a;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a4a00;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
  transform: translateX(-50%);
  transition: opacity 0.8s;
}

.draft-note.fading {
  opacity: 0;
}

.tabs-card.alone {
  border-radius: 14px;
}

.cases-table thead th {
  white-space: normal;
  vertical-align: middle;
}

/* Credit purpose: free text, kept readable in the table. */
.credit-purpose-cell {
  display: block;
  min-width: 180px;
  max-width: 320px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.credit-modal textarea#credit-purpose {
  min-height: 64px;
}

/* The block a dialog just saved, shown again after the reload. */
.info-card.just-updated {
  animation: block-saved 2.2s ease-out;
}

@keyframes block-saved {
  0% { box-shadow: 0 0 0 4px rgba(23, 167, 85, 0.55); }
  100% { box-shadow: 0 0 0 4px rgba(23, 167, 85, 0); }
}

/* Case status in the list. */
.cases-status {
  min-width: 190px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.status-draft { background: #f1f5f9; color: #475569; }
.status-sent_admin { background: #e0ecff; color: #1d4ed8; }
.status-sent_underwriter { background: #ede9fe; color: #6d28d9; }
.status-rework { background: #ffedd5; color: #c2410c; }
.status-rejected { background: #fee2e2; color: #b91c1c; }
.status-approved { background: #dcfce7; color: #15803d; }

.status-who {
  color: #374151;
  font-weight: 700;
}

.status-note {
  display: block;
  max-width: 240px;
  margin-top: 2px;
  color: #9a3412;
  font-size: 12.5px;
  font-style: italic;
}

/* "Actions" menu with colored icons. */
.cases-actions {
  width: 150px;
}

.case-menu {
  position: relative;
}

.case-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #c3cbdb;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  color: #1f2a44;
  font: 700 14px var(--app-font);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #cbd3e0;
  cursor: pointer;
}

.case-menu.open .case-menu-button,
.case-menu-button:hover {
  border-color: #17a755;
}

.case-menu-caret {
  color: #64748b;
  font-size: 11px;
  transition: transform 0.2s;
}

.case-menu.open .case-menu-caret {
  transform: rotate(180deg);
}

.case-menu-list {
  position: fixed;
  z-index: 25;
  min-width: 210px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
}

.case-menu-list[hidden] {
  display: none;
}

.case-menu-list form {
  margin: 0;
}

.case-menu-list a,
.case-menu-list button,
.case-menu-off {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #1f2a44;
  font: 600 14.5px var(--app-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.case-menu-list a:hover,
.case-menu-list button:hover {
  background: #f1f5f9;
}

.case-menu-list .case-menu-danger {
  color: #b91c1c;
}

.case-menu-off {
  color: #94a3b8;
  cursor: not-allowed;
}

.status-chip {
  white-space: normal;
}

/* Case list filter. */
.cases-filter {
  display: grid;
  grid-template-columns: 160px 160px 150px minmax(200px, 1fr) 210px auto;
  align-items: end;
  gap: 12px;
  margin: 0;
  padding: 16px 24px 4px;
}

.cases-filter label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #374151;
  font-size: 13.5px;
  font-weight: 700;
}

.cases-filter input,
.cases-filter select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid #cfd6e3;
  border-radius: 9px;
  background: #fff;
  color: #1f2937;
  font: 400 15px var(--app-font);
}

.cases-filter input:focus,
.cases-filter select:focus {
  border-color: #17a755;
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 167, 85, 0.18);
}

.cases-filter-buttons {
  display: flex;
  gap: 8px;
}

.cases-search,
.cases-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-radius: 9px;
  font: 800 14.5px var(--app-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-2px);
}

.cases-search {
  border: 1px solid #0f7a3c;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 0 #0b6431;
}

.cases-clear {
  border: 1px solid #b9c3d4;
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf2 100%);
  color: #374151;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #a3afc2;
}

.cases-search:active,
.cases-clear:active {
  box-shadow: none;
  transform: translateY(1px);
}

.cases-found {
  grid-column: 1 / -1;
  margin: 0;
  color: #15803d;
  font-size: 13.5px;
  font-weight: 800;
}

.cases-found:empty {
  display: none;
}

.cases-alert {
  margin: 12px 24px 0;
  padding: 10px 14px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  font-weight: 700;
}

tr.case-row[hidden],
tr.cases-no-match[hidden] {
  display: none;
}

/* Deleting asks for the RS code. */
.delete-head {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.delete-name {
  margin: 14px 0 6px;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
}

.delete-warning {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  background: #fef2f2;
  color: #7f1d1d;
  line-height: 1.5;
}

.delete-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid #9c2e24;
  border-radius: 9px;
  background: linear-gradient(180deg, #e25a4b 0%, #b3352a 100%);
  color: #fff;
  font: 800 15px var(--app-font);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 0 #7a221a;
  cursor: pointer;
}

@media (max-width: 1200px) {
  .cases-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Credit purpose in the case list: one line per credit, cut with "…". */
.cases-purpose {
  max-width: 220px;
}

.cases-purpose .cases-line {
  display: block;
  overflow: hidden;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cases-table td.cases-status {
  width: 215px;
  min-width: 215px;
}

.cases-status .status-chip {
  min-width: 0;
  max-width: 205px;
}

/* Collateral: the name in the table, everything else behind the ⓘ. */
.collateral-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.collateral-info {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e0ecff;
  color: #2563eb;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 2px 0 #bfd3f7;
}

.collateral-info:hover {
  background: #2563eb;
  color: #fff;
}

.collateral-info-body {
  padding-top: 12px;
  padding-bottom: 12px;
}

.collateral-info-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid #eef1f6;
  font-size: 15px;
}

.collateral-info-row span {
  color: #6b7280;
}

.collateral-info-row strong {
  overflow-wrap: anywhere;
}

.collateral-info-row a {
  color: #128a46;
}

/* The rate beside a foreign currency, kept on the same line as its amount. */
.cases-currency .cases-line {
  gap: 6px;
  white-space: nowrap;
}

.cases-rate {
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The organization's name in the first section heading. */
.heading-org {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border: 1px solid #a9dcbd;
  border-radius: 16px;
  background: #e8f7ee;
  color: #11733b;
  font-size: 16px;
  font-weight: 800;
}

.heading-org[hidden] {
  display: none;
}

/* "Edit" in view mode: brand green. */
.view-edit {
  border-color: #0f7a3c;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #0b6431, 0 6px 10px rgba(15, 23, 42, 0.2);
}

.view-edit:hover {
  filter: brightness(1.06);
}

.view-edit:active {
  box-shadow: 0 1px 0 #0b6431;
}

/* The credit officer shown by RS code only. */
.rs-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #1f2a44;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Case archives: making one on the case list, loading one on the Info page. */
.archive-head {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.archive-contents {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid #7c3aed;
  border-radius: 6px;
  background: #f5f3ff;
  color: #4c1d95;
  line-height: 1.5;
}

.archive-hint {
  display: block;
  margin-top: 4px;
  color: #64748b;
}

.archive-file {
  margin: 14px 0 10px;
  color: #1f2937;
  font-weight: 800;
  word-break: break-all;
}

.archive-file i {
  color: #7c3aed;
}

.archive-error,
.archive-success,
.archive-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  line-height: 1.5;
}

.archive-error {
  border-left: 4px solid #dc2626;
  background: #fef2f2;
  color: #7f1d1d;
}

.archive-success {
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
  color: #14532d;
  word-break: break-all;
}

.archive-success p {
  margin: 0;
}

.archive-note {
  border-left: 4px solid #d97706;
  background: #fffbeb;
  color: #78350f;
}

.archive-error[hidden],
.archive-success[hidden],
.archive-note[hidden],
#import-open[hidden],
#import-submit[hidden] {
  display: none;
}

#import-open {
  text-decoration: none;
}

/* Settings: the gear in the header opens the employee's own login password. */
.icon-settings {
  color: #cbd5e1;
}

.icon-settings i {
  transition: transform 0.4s ease;
}

.icon-settings:hover i {
  transform: rotate(90deg);
}

.settings-head {
  background: linear-gradient(135deg, #475569, #1e293b);
}

.settings-section {
  margin: 14px 0 6px;
  color: #1f2937;
  font-size: 16px;
  font-weight: 800;
}

.settings-section i,
.settings-account i {
  color: #475569;
}

.settings-account {
  margin: 0 0 10px;
  color: #475569;
}

.settings-secret {
  position: relative;
  display: block;
}

.settings-secret input {
  width: 100%;
  padding-right: 44px;
}

.settings-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #64748b;
  cursor: pointer;
  transform: translateY(-50%);
}

.settings-eye:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.settings-field-error {
  display: block;
  margin-top: 4px;
  color: #b91c1c;
  font-weight: 600;
}

.settings-field-error[hidden] {
  display: none;
}

.settings-note {
  margin-top: 12px;
}

/* Realizatsiya: the case list's look (white card, raised green header row). */
.sales-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sales-icon {
  color: #17a755;
  font-size: 22px;
}

button.sales-add {
  font-family: var(--app-font);
  cursor: pointer;
}

.sales-notice,
.sales-formula {
  margin: 0 24px 18px;
  color: #475569;
}

.sales-notice {
  margin-top: 18px;
}

.sales-formula {
  font-size: 13px;
}

.sales-table thead th {
  text-align: center;
}

.sales-table td {
  vertical-align: middle;
}

.sales-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-who {
  min-width: 200px;
}

.sales-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin-right: 8px;
  padding: 0 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2fbf6f 0%, #168f4a 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 0 #0b6431;
}

.sales-name {
  font-weight: 700;
}

.sales-note-text {
  display: block;
  max-width: 360px;
  margin: 4px 0 0 auto;
  color: #475569;
  text-align: left;
  white-space: normal;
}

.sales-table tfoot th {
  padding: 13px 12px;
  border-top: 2px solid #86b36b;
  background: #e2f0d9;
  color: #14532d;
  font-weight: 800;
}

.sales-table tfoot th:first-child {
  border-bottom-left-radius: 11px;
  text-align: left;
}

.sales-table tfoot th:last-child {
  border-bottom-right-radius: 11px;
}

.sales-table:has(tfoot) tbody tr:last-child td {
  border-bottom: 1px solid #e3e8f2;
  border-radius: 0;
}

.sales-head-fields {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  margin-top: 6px;
}

.sales-entry {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
}

.sales-entry th,
.sales-entry td {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  text-align: left;
}

.sales-entry thead th {
  background: #e2f0d9;
  font-weight: 800;
}

.sales-entry select {
  width: 100%;
}

.sales-entry tbody th {
  width: 40%;
  font-weight: 700;
}

.sales-preview {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 4px solid #16a34a;
  border-radius: 6px;
  background: #f0fdf4;
  color: #14532d;
  font-weight: 700;
}

.sales-note {
  margin-top: 12px;
}

.sales-note textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}

.sales-preview[hidden],
.sales-note[hidden] {
  display: none;
}

.sales-table tfoot th.sales-number {
  text-align: right;
}

.sales-name {
  display: inline-block;
  max-width: calc(100% - 40px);
  vertical-align: middle;
}

/* Realizatsiya sheet: trade, supply and goods of one business on one page. */
.sales-actions {
  width: auto;
}

.sales-actions form {
  display: inline;
}

.sales-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  margin-right: 4px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  vertical-align: middle;
}

.sales-view {
  background: #16a34a;
}

.sales-pdf {
  background: #c2410c;
}

a.related-edit {
  background: #3b82f6;
}

.sales-exceeded {
  color: #b91c1c !important;
  font-weight: 800;
}

.sales-sheet {
  padding-bottom: 24px;
}

.sales-sheet-name {
  color: #475569;
  font-weight: 700;
}

.sales-errors {
  margin: 16px 24px 0;
}

.sales-errors ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.sales-lock {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sales-part {
  margin: 22px 24px 0;
}

.sales-part-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #14532d;
  font-size: 18px;
}

.sales-part-title b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2fbf6f 0%, #168f4a 100%);
  color: #fff;
  box-shadow: 0 2px 0 #0b6431;
}

.sales-activity {
  display: grid;
  grid-template-columns: 180px 1fr 1.4fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid #b7d7a8;
  border-radius: 10px;
  background: #e2f0d9;
}

.sales-activity label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #14532d;
  font-weight: 800;
}

.sales-activity label b {
  color: #dc2626;
}

.sales-sheet input,
.sales-sheet textarea {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #cfd8e6;
  border-radius: 7px;
  background: #fff;
  font: inherit;
}

.sales-sheet input.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-sheet textarea {
  min-height: 44px;
  resize: vertical;
}

.sales-sheet fieldset:disabled input,
.sales-sheet fieldset:disabled textarea {
  border-color: transparent;
  background: transparent;
  color: #111827;
  resize: none;
}

.sales-grid {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  background: #fff;
}

.sales-grid th,
.sales-grid td {
  padding: 6px 8px;
  border: 1px solid #cfd8e6;
  vertical-align: middle;
}

.sales-grid thead th {
  background: #e2f0d9;
  color: #14532d;
  font-weight: 800;
  text-align: center;
}

.sales-week thead th {
  background: #fff2cc;
}

.sales-grid tbody th,
.sales-grid tfoot th {
  background: #f8fafc;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.sales-grid td[data-out],
.sales-grid .sales-out {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sales-week tfoot td,
.sales-week tfoot th {
  background: #f0fdf4;
  font-weight: 700;
}

.sales-pair-tables {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}

.sales-source td:nth-child(2) {
  width: 200px;
}

.sales-summary-small {
  max-width: 560px;
}

.sales-summary-small td {
  width: 220px;
  font-weight: 800;
}

.sales-out-green {
  background: #e2f0d9;
  font-weight: 800;
}

.sales-out-peach {
  background: #fff2e6;
}

.sales-out-orange {
  background: #f59e0b;
  color: #fff;
}

.sales-lines .sales-line-actions {
  width: 54px;
  text-align: center;
}

.sales-lines tbody input {
  min-width: 110px;
}

.sales-goods-total th,
.sales-goods-total td {
  background: #e2f0d9;
  font-weight: 800;
}

.sales-line-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid #15803d;
  border-radius: 8px;
  background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
  box-shadow: 0 3px 0 #86efac;
  color: #14532d;
  font: 800 14px var(--app-font);
  cursor: pointer;
}

.sales-line-add:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #86efac;
}

.sales-sheet.viewing .sales-line-add,
.sales-sheet.viewing .sales-line-actions {
  display: none;
}

.sales-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 16px;
}

.sales-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #cfd8e6;
  border-radius: 8px;
  background: #e2f0d9;
  color: #14532d;
  font-weight: 700;
}

.sales-result-row.strong {
  font-weight: 800;
}

.sales-result-row output {
  min-width: 160px;
  padding: 4px 10px;
  border-radius: 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-result-row .credit-unit {
  width: 220px;
}

.sales-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sales-sheet-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 24px 24px 0;
}

.sales-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid #94a3b8;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  box-shadow: 0 3px 0 #a3afc2;
  color: #1f2937;
  font: 800 15px var(--app-font);
  text-decoration: none;
  cursor: pointer;
}

.sales-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #a3afc2;
}

.sales-button.pdf {
  border-color: #9a3412;
  background: linear-gradient(180deg, #fb923c 0%, #c2410c 100%);
  box-shadow: 0 3px 0 #7c2d12;
  color: #fff;
}

.sales-button.save,
.sales-button.edit {
  border-color: #0f7a3c;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  box-shadow: 0 3px 0 #0b6431;
  color: #fff;
}

.sales-button[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  .sales-activity,
  .sales-pair-tables,
  .sales-results,
  .sales-final {
    grid-template-columns: 1fr;
  }
}

.sales-result-row .credit-unit input {
  padding-right: 52px;
}

.sales-summary-small td.sales-out {
  font-weight: 800;
}

.sales-who-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sales-who-line .sales-order {
  flex: none;
  margin-right: 0;
}

.sales-who-line .sales-name {
  display: block;
  max-width: none;
  padding-top: 3px;
}

/* Realizatsiya sheet: the bank's sheet colours, raised (3D) tables. */
.sales-sheet .sales-3d {
  border: 1px solid #c9d6c0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 0 #c9d6c0, 0 10px 18px rgba(15, 23, 42, 0.1);
}

.sales-sheet .sales-3d th,
.sales-sheet .sales-3d td {
  border: 0;
  border-right: 1px solid #dfe7da;
  border-bottom: 1px solid #dfe7da;
}

.sales-sheet .sales-3d tr > :last-child {
  border-right: 0;
}

.sales-sheet .sales-3d tbody:last-child tr:last-child > *,
.sales-sheet .sales-3d tfoot tr:last-child > * {
  border-bottom: 0;
}

/* Header cells: pale green, lit from above with a darker lower edge. */
.sales-sheet .sales-3d thead th,
.sales-sheet .sales-3d tbody th,
.sales-sheet .sales-3d tfoot th {
  background: linear-gradient(180deg, #f4faf0 0%, #e2f0d9 55%, #d3e8c5 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 #bcd8aa;
  color: #1f3d1a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* The weekdays and the income tables: the sheet's pale yellow. */
.sales-sheet .sales-week thead th,
.sales-sheet .sales-yellow-head thead th {
  background: linear-gradient(180deg, #fffaf0 0%, #fff2cc 55%, #ffe8a8 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 #f0d58a;
  color: #4a3b0a;
}

.sales-sheet .sales-3d td {
  background: #fff;
}

.sales-sheet .sales-3d tfoot td,
.sales-sheet .sales-goods-total td {
  background: linear-gradient(180deg, #f4faf0 0%, #e2f0d9 100%);
  font-weight: 800;
}

/* Typed cells sit slightly sunken in the raised table. */
.sales-sheet .sales-3d input,
.sales-sheet .sales-3d textarea {
  border-color: #d6dfd0;
  box-shadow: inset 0 2px 3px rgba(15, 23, 42, 0.08);
}

.sales-sheet .sales-3d td.sales-out-green {
  background: linear-gradient(180deg, #eef7e8 0%, #d9eccd 100%);
}

.sales-sheet .sales-3d td.sales-out-peach,
.sales-sheet .sales-3d .sales-line td.sales-out-peach {
  background: linear-gradient(180deg, #fffaf4 0%, #fde9d6 100%);
}

.sales-sheet .sales-3d td.sales-out-orange {
  background: linear-gradient(180deg, #fbbf72 0%, #f59e0b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 #c77a06;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Part 1: number, activity and address on one line. */
.sales-activity-table th {
  font-size: 16px;
  white-space: nowrap;
}

.sales-activity-table th b {
  color: #dc2626;
}

.sales-activity-table td.sales-activity-number {
  width: 90px;
}

.sales-activity-table input,
.sales-activity-table textarea {
  font-size: 16px;
  font-weight: 700;
}

.sales-activity-table textarea {
  min-height: 44px;
}

.sales-stack {
  display: grid;
  gap: 14px;
}

.sales-stack .sales-source td:nth-child(3) {
  width: 60%;
}

/* Part 3: the results under the goods, as on the sheet. */
.sales-results-table {
  max-width: 980px;
  margin-top: 18px;
}

.sales-results-table td {
  width: 220px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sales-results-table .credit-unit input {
  padding-right: 44px;
}

/* Realizatsiya sheet, part 1: filled through the trade dialog. */
.sales-part-title .sales-trade-open {
  margin-left: auto;
  font-family: var(--app-font);
  cursor: pointer;
}

.sales-sheet.viewing .sales-trade-open {
  display: none;
}

.sales-mode-chip {
  padding: 3px 12px;
  border: 1px solid #f0d58a;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff2cc 100%);
  color: #4a3b0a;
  font-size: 14px;
  font-weight: 700;
}

.sales-mode-chip em {
  font-style: normal;
  font-weight: 800;
}

.sales-mode-chip[hidden] {
  display: none;
}

.sales-sheet input.sales-from-dialog,
.sales-sheet input[readonly][data-monthly-lock],
.sales-sheet textarea[readonly][data-monthly-lock] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #111827;
  font-weight: 700;
  cursor: default;
}

.sales-month-range {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  text-align: right;
}

.sales-trade-modal {
  width: min(760px, 96vw);
}

.sales-head-three {
  grid-template-columns: 120px 1fr 170px;
}

.sales-trade-modal .credit-unit input {
  padding-right: 52px;
}

.sales-entry-week tbody th {
  width: 26%;
}

.sales-entry thead th b {
  color: #dc2626;
}

.sales-mode-hint {
  margin: 8px 0 0;
}

.sales-mode-hint[hidden],
.sales-trade-modal [data-mode-block][hidden] {
  display: none;
}

.sales-sheet textarea[readonly][data-monthly-lock] {
  resize: none;
}

/* Supply in the sheet's pale blue, goods in its pale peach and yellow; still raised. */
.sales-sheet .sales-blue thead th,
.sales-sheet .sales-blue tbody th,
.sales-sheet .sales-blue tfoot th {
  background: linear-gradient(180deg, #f3f8fd 0%, #ddebf7 55%, #c9dff2 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 #a9c8e6;
  color: #1e3a5f;
}

.sales-sheet .sales-blue.sales-3d,
.sales-sheet .sales-blue.sales-3d th,
.sales-sheet .sales-blue.sales-3d td {
  border-color: #cddcec;
}

.sales-sheet .sales-blue.sales-3d {
  box-shadow: 0 4px 0 #c3d6ea, 0 10px 18px rgba(15, 23, 42, 0.1);
}

.sales-sheet .sales-3d td.sales-out-blue {
  background: linear-gradient(180deg, #eef5fc 0%, #d4e5f5 100%);
  font-weight: 800;
}

.sales-sheet .sales-blue tfoot td:not([data-out]) {
  background: #fff;
}

.sales-sheet .sales-peach thead th,
.sales-sheet .sales-peach tbody th,
.sales-sheet .sales-peach tfoot th,
.sales-sheet .sales-peach .sales-goods-total td {
  background: linear-gradient(180deg, #fffaf0 0%, #fff2cc 55%, #fde7b0 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 #ecd28f;
  color: #4a3b0a;
}

.sales-sheet .sales-peach.sales-3d {
  border-color: #ecdcb4;
  box-shadow: 0 4px 0 #ecdcb4, 0 10px 18px rgba(15, 23, 42, 0.1);
}

.sales-sheet .sales-peach .sales-goods-total td.sales-out-peach {
  background: linear-gradient(180deg, #fff4e6 0%, #fbdcbc 100%);
}

.sales-sheet .sales-green-values td {
  background: linear-gradient(180deg, #f4faf0 0%, #e2f0d9 100%);
  font-weight: 800;
}

.sales-line-insert {
  width: 32px;
  height: 30px;
  margin-right: 4px;
  border: 0;
  border-radius: 6px;
  background: #16a34a;
  color: #fff;
  cursor: pointer;
}

.sales-lines .sales-line-actions {
  width: 84px;
  white-space: nowrap;
}

.sales-sheet.viewing .sales-line-insert {
  display: none;
}

/* The trade dialog: identity, period as segments, a ruled weekday grid and a live summary. */
.sales-trade-modal {
  width: min(820px, 96vw);
}

.trade-head {
  background: linear-gradient(135deg, #1fb862 0%, #139048 60%, #0f7a3c 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.trade-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trade-head-text h3 {
  margin: 0;
}

.trade-head-text small {
  color: #dcfce7;
  font-size: 13px;
}

.trade-head .credit-modal-close {
  margin-left: auto;
}

.trade-body {
  display: grid;
  gap: 14px;
  padding: 18px 24px 10px;
  background: #f3f6fa;
}

.trade-card {
  padding: 16px 18px;
  border: 1px solid #e1e7f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 0 #e5eaf2, 0 6px 16px rgba(15, 23, 42, 0.06);
}

.trade-card[hidden] {
  display: none;
}

.trade-card-table {
  padding: 0;
  overflow: hidden;
}

.trade-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #14532d;
  font-size: 15px;
}

.trade-identity {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
}

.trade-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trade-field label,
.trade-label {
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.trade-field label b,
.trade-label b,
.trade-grid thead b {
  color: #dc2626;
}

.trade-input-icon {
  position: relative;
  display: block;
}

.trade-input-icon i {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #94a3b8;
  transform: translateY(-50%);
  pointer-events: none;
}

.trade-input-icon input {
  padding-left: 36px;
}

.sales-trade-modal input,
.sales-trade-modal textarea {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: 600 15px var(--app-font);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sales-trade-modal textarea {
  height: auto;
  min-height: 90px;
  padding: 10px 12px;
  resize: vertical;
}

.sales-trade-modal input:focus,
.sales-trade-modal textarea:focus {
  border-color: #16a34a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.trade-period {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.trade-segments {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #eef2f7;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.12);
}

.trade-segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 9px;
  color: #475569;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.trade-segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.trade-segment:has(input:checked) {
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  box-shadow: 0 2px 0 #0b6431, 0 4px 10px rgba(19, 144, 72, 0.3);
  color: #fff;
}

.trade-segment:has(input:focus-visible) {
  outline: 3px solid rgba(22, 163, 74, 0.35);
  outline-offset: 1px;
}

.trade-hint {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.trade-hint[hidden] {
  display: none;
}

.trade-grid {
  width: 100%;
  border-collapse: collapse;
}

.trade-grid thead th {
  padding: 11px 12px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff2cc 100%);
  border-bottom: 2px solid #f0d58a;
  color: #4a3b0a;
  font-size: 13px;
  text-align: left;
}

.trade-grid tbody th,
.trade-grid tbody td,
.trade-grid tfoot th,
.trade-grid tfoot td {
  padding: 7px 12px;
  border-bottom: 1px solid #eef2f7;
}

.trade-grid tbody tr:nth-child(even) {
  background: #fafbfd;
}

.trade-grid tbody tr:focus-within {
  background: #f0fdf4;
}

.trade-grid tbody th {
  width: 24%;
  color: #1f2937;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.trade-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 8px;
  background: #e2f0d9;
  color: #166534;
  font-size: 12px;
}

.trade-weekend .trade-day {
  background: #fde8d7;
  color: #9a3412;
}

.trade-money {
  position: relative;
  display: block;
}

.trade-money input {
  padding-right: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.trade-money em {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
  transform: translateY(-50%);
  pointer-events: none;
}

.trade-avg,
.trade-grid tfoot td {
  width: 17%;
  color: #166534;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trade-grid tfoot th,
.trade-grid tfoot td {
  border-top: 2px solid #d9e7cf;
  background: #f4faf0;
  color: #14532d;
  font-weight: 800;
  text-align: right;
}

.trade-grid tfoot th {
  text-align: left;
}

.trade-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.trade-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.trade-summary[hidden] {
  display: none;
}

.trade-summary div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  box-shadow: 0 2px 0 #bbf7d0;
}

.trade-summary span {
  color: #166534;
  font-size: 13px;
  font-weight: 700;
}

.trade-summary b {
  color: #14532d;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.trade-foot {
  align-items: center;
}

.trade-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  color: #64748b;
  font-size: 12px;
}

.trade-keys kbd {
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff 0%, #eef2f7 100%);
  box-shadow: 0 1px 0 #cbd5e1;
  color: #334155;
  font: 700 11px var(--app-font);
  text-align: center;
}

@media (max-width: 700px) {
  .trade-identity,
  .trade-pair,
  .trade-summary {
    grid-template-columns: 1fr;
  }

  .trade-keys {
    display: none;
  }
}

/* The dialog body scrolls; its cards keep their full height. */
.sales-trade-modal .trade-body {
  display: flex;
  flex-direction: column;
}

.sales-trade-modal .trade-body > * {
  flex-shrink: 0;
}

.sales-trade-modal .trade-input-icon input {
  padding-left: 38px;
}

.sales-trade-modal .trade-money input {
  padding-right: 48px;
  text-align: right;
}

.sales-trade-modal .trade-grid input {
  height: 38px;
}

.trade-grid tbody th,
.trade-grid tbody td {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* The sheet's three parts as separate panels, each with its own colour band. */
.sales-sheet .sales-block {
  margin: 28px 24px 0;
  padding: 0 20px 22px;
  border: 1px solid #dfe5ee;
  border-top: 0;
  border-radius: 14px;
  background: #fbfcfe;
  box-shadow: 0 3px 0 #e3e8f0, 0 12px 26px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.sales-sheet .sales-block > .sales-part-title {
  margin: 0 -20px 18px;
  padding: 14px 20px;
  border-bottom: 1px solid #dfe5ee;
}

.sales-sheet .sales-block-trade > .sales-part-title {
  background: linear-gradient(180deg, #f4faf0 0%, #e2f0d9 100%);
  box-shadow: inset 0 4px 0 #22a559;
  color: #14532d;
}

.sales-sheet .sales-block-supply > .sales-part-title {
  background: linear-gradient(180deg, #f3f8fd 0%, #ddebf7 100%);
  box-shadow: inset 0 4px 0 #3b82f6;
  color: #1e3a5f;
}

.sales-sheet .sales-block-supply > .sales-part-title b {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 2px 0 #1e40af;
}

.sales-sheet .sales-block-goods > .sales-part-title {
  background: linear-gradient(180deg, #fffaf0 0%, #fff2cc 100%);
  box-shadow: inset 0 4px 0 #f59e0b;
  color: #4a3b0a;
}

.sales-sheet .sales-block-goods > .sales-part-title b {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  box-shadow: 0 2px 0 #92400e;
}

/* The summary and buttons sit under the three panels. */
.sales-sheet .sales-final {
  margin-top: 28px;
}

/* Tables inside a panel all start at the panel's own edge. */
.sales-sheet .sales-block .table-scroll {
  padding: 0;
}

.sales-sheet .sales-block .sales-grid:first-child {
  margin-top: 0;
}

/* Even spacing between the tables of a panel. */
.sales-sheet .sales-block > * + * {
  margin-top: 18px;
}

.sales-sheet .sales-block .table-scroll > .sales-grid,
.sales-sheet .sales-block .sales-stack > .sales-grid {
  margin-top: 0;
}

/* The sheet's "fix before saving" note fades out after a few seconds. */
.sales-errors {
  transition: opacity 0.6s ease;
}

.sales-errors.fading {
  opacity: 0;
}

/* Goods: the Excel template tools and files attached to each line. */
.sales-template-tools {
  display: inline-flex;
  gap: 10px;
  margin-left: auto;
}

.sales-template-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font: 800 14px var(--app-font);
  text-decoration: none;
  cursor: pointer;
}

.sales-template-button input {
  display: none;
}

.sales-template-button.download {
  border: 1px solid #15803d;
  background: linear-gradient(180deg, #ffffff 0%, #dcfce7 100%);
  box-shadow: 0 3px 0 #86efac;
  color: #166534;
}

.sales-template-button.download i {
  color: #16a34a;
}

.sales-template-button.upload {
  border: 1px solid #1d4ed8;
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
  box-shadow: 0 3px 0 #93c5fd;
  color: #1e3a8a;
}

.sales-template-button.upload i {
  color: #2563eb;
}

.sales-template-button:active {
  transform: translateY(2px);
  box-shadow: none;
}

.sales-sheet.viewing .sales-template-button.upload {
  display: none;
}

.sales-template-status {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-left: 4px solid #16a34a;
  border-radius: 6px;
  background: #f0fdf4;
  color: #14532d;
  font-weight: 700;
  transition: opacity 0.6s ease;
}

.sales-template-status.failed {
  border-left-color: #dc2626;
  background: #fef2f2;
  color: #7f1d1d;
}

.sales-template-status.fading {
  opacity: 0;
}

.sales-template-status[hidden] {
  display: none;
}

.sales-good-name {
  min-width: 170px;
}

.sales-files {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sales-files:not(:empty) {
  margin-top: 6px;
}

.sales-file {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  border: 1px solid #ddd6fe;
  border-radius: 12px;
  background: #f5f3ff;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 700;
}

.sales-file a {
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-file.picked {
  padding-right: 8px;
  border-style: dashed;
}

.sales-file.removed {
  opacity: 0.5;
  text-decoration: line-through;
}

.sales-file-remove {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 11px;
  cursor: pointer;
}

.sales-sheet.viewing .sales-file-remove {
  display: none;
}

.sales-line-attach {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  margin-right: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 2px 0 #5b21b6;
  color: #fff;
  vertical-align: middle;
  cursor: pointer;
}

.sales-line-attach input {
  display: none;
}

.sales-attach-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  line-height: 17px;
}

.sales-attach-count[hidden] {
  display: none;
}

.sales-sheet.viewing .sales-line-attach {
  display: none;
}

.sales-lines#goods .sales-line-actions {
  width: 124px;
}

/* Goods line actions: "+" on its own, everything else in a menu with coloured icons. */
.sales-line-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sales-line-tools .sales-line-insert {
  margin-right: 0;
}

.sales-line-menu .sales-line-menu-button {
  position: relative;
  height: 30px;
  padding: 0 10px;
}

.sales-line-menu .sales-attach-count {
  top: -8px;
  right: -8px;
}

.sales-line-menu .case-menu-list button:disabled {
  color: #94a3b8;
  cursor: not-allowed;
}

.sales-line-menu .case-menu-list button:disabled .icon-bubble {
  filter: grayscale(1);
  opacity: 0.5;
}

.sales-line-menu .case-menu-list button:disabled:hover {
  background: none;
}

.sales-lines#goods .sales-line-actions {
  width: 110px;
}

/* Realizatsiya sheet: one tab per business, like a workbook's sheets. */
.sales-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  padding: 14px 24px 0;
  border-bottom: 3px solid #17a755;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

.sales-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  height: 40px;
  padding: 0 16px 0 8px;
  border: 1px solid #cfd8e3;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow: inset 0 1px 0 #ffffff;
  color: #334155;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.sales-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-tab b {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: #cbd5e1;
  color: #1f2937;
  font-size: 12px;
}

.sales-tab:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf3 100%);
  color: #14532d;
}

.sales-tab.active {
  height: 44px;
  border-color: #17a755;
  background: linear-gradient(180deg, #2fbf6f 0%, #168f4a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 -2px 8px rgba(23, 167, 85, 0.25);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.sales-tab.active b {
  background: #fff;
  color: #15803d;
  text-shadow: none;
}

.sales-tab.new i {
  margin-left: 6px;
}

.sales-tab.add {
  padding-left: 12px;
  border-style: dashed;
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.sales-tab.add:hover {
  background: #dcfce7;
}

/* Goods lines show no file names; the files are counted on the menu button and listed in the menu. */
.sales-good-name .sales-files {
  display: none;
}

.sales-line-menu .sales-file-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-line-menu .sales-file-link[hidden] {
  display: none;
}

.sales-menu-rule {
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid #e2e8f0;
}

/* Business tabs: the link and a delete cross inside one tab. */
.sales-tab {
  position: relative;
}

.sales-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.sales-tab:has(.sales-tab-delete) {
  padding-right: 6px;
}

.sales-tab-delete {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  font-size: 12px;
  cursor: pointer;
}

.sales-tab-delete:hover {
  background: #dc2626;
  color: #fff;
}

.sales-tab.active .sales-tab-delete {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.sales-tab.active .sales-tab-delete:hover {
  background: #dc2626;
}

.sales-delete-alert {
  transition: opacity 0.6s ease;
}

.sales-delete-alert.fading {
  opacity: 0;
}

.sales-sheet [data-mode-show][hidden] {
  display: none;
}

/* Two periods in the trade dialog. */
.trade-segments {
  grid-template-columns: repeat(2, 1fr);
}

/* Realizatsiya sheet, deeper ("4D") look: layered depth, bevelled headers, sunken cells and
   a gentle lift on hover. Colours stay those of the bank's sheet. */
.sales-sheet .sales-block {
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 0 #dde3ec,
    0 18px 36px -12px rgba(15, 23, 42, 0.22),
    0 6px 14px rgba(15, 23, 42, 0.06);
}

.sales-sheet .sales-3d {
  --edge: #b9cdab;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 0 #ffffff,
    0 6px 0 var(--edge),
    0 7px 0 rgba(15, 23, 42, 0.08),
    0 16px 30px -10px rgba(15, 23, 42, 0.28),
    0 3px 8px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.2s ease;
}

.sales-sheet .sales-3d.sales-blue {
  --edge: #a9c4e2;
}

.sales-sheet .sales-3d.sales-peach,
.sales-sheet .sales-3d.sales-week {
  --edge: #e3cc8f;
}

/* No transform here: it would make the tables clip the actions menus opened inside them. */
.sales-sheet .sales-3d:hover {
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 0 #ffffff,
    0 8px 0 var(--edge),
    0 9px 0 rgba(15, 23, 42, 0.08),
    0 24px 40px -12px rgba(15, 23, 42, 0.32),
    0 4px 10px rgba(15, 23, 42, 0.1);
}

/* Header cells: lit from the top-left, shaded at the bottom-right, like a bevelled key. */
.sales-sheet .sales-3d thead th,
.sales-sheet .sales-3d tbody th,
.sales-sheet .sales-3d tfoot th {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 1px 0 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08),
    inset -1px 0 0 rgba(0, 0, 0, 0.05);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  letter-spacing: 0.01em;
}

.sales-sheet .sales-3d thead th {
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Body cells: a soft top light; the row under the pointer or cursor stands out. */
.sales-sheet .sales-3d tbody td {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  transition: background-color 0.15s ease;
}

.sales-sheet .sales-3d tbody tr:hover > td,
.sales-sheet .sales-3d tbody tr:focus-within > td {
  background-image: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.sales-sheet .sales-3d tbody tr:focus-within > th {
  box-shadow:
    inset 4px 0 0 #16a34a,
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08);
}

/* Typed cells sit sunken; the one being typed in rises with a soft glow. */
.sales-sheet .sales-3d input,
.sales-sheet .sales-3d textarea {
  border: 1px solid #cfd8c8;
  background: linear-gradient(180deg, #f6f8f5 0%, #ffffff 40%);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12), inset 0 -1px 0 #ffffff, 0 1px 0 #ffffff;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.sales-sheet .sales-3d input:focus,
.sales-sheet .sales-3d textarea:focus {
  border-color: #16a34a;
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18), 0 4px 10px rgba(22, 163, 74, 0.18);
  transform: translateY(-1px);
}

/* Computed cells: raised slightly above the sheet. */
.sales-sheet .sales-3d td.sales-out-green,
.sales-sheet .sales-3d td.sales-out-blue,
.sales-sheet .sales-3d td.sales-out-peach {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
}

.sales-sheet .sales-3d td.sales-out-orange {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 0 #b86b05,
    0 2px 6px rgba(245, 158, 11, 0.35);
}

.sales-sheet .sales-part-title b {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 0 rgba(0, 0, 0, 0.25), 0 6px 12px rgba(15, 23, 42, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .sales-sheet .sales-3d,
  .sales-sheet .sales-3d input,
  .sales-sheet .sales-3d textarea {
    transition: none;
  }

  .sales-sheet .sales-3d input:focus,
  .sales-sheet .sales-3d textarea:focus {
    transform: none;
  }
}

/* Viewing a sheet: the goods lines keep their menu, for downloading their files only. */
.sales-sheet.viewing #goods .sales-line-actions {
  display: table-cell;
}

.sales-sheet.viewing #goods .sales-line-menu [data-file-action],
.sales-sheet.viewing #goods .sales-line-menu [data-remove] {
  display: none;
}

.sales-line-menu .sales-line-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.sales-line-menu .case-menu-list a.is-off {
  color: #94a3b8;
  cursor: not-allowed;
  pointer-events: none;
}

.sales-line-menu .case-menu-list a.is-off .icon-bubble {
  filter: grayscale(1);
  opacity: 0.5;
}

/* Realizatsiya sheet: data cells on plain white; only headers and row labels keep colour. */
.sales-sheet .sales-3d td,
.sales-sheet .sales-3d td.sales-out-green,
.sales-sheet .sales-3d td.sales-out-blue,
.sales-sheet .sales-3d td.sales-out-peach,
.sales-sheet .sales-3d .sales-line td.sales-out-peach,
.sales-sheet .sales-3d tfoot td,
.sales-sheet .sales-week.sales-3d tfoot td,
.sales-sheet .sales-goods-total td,
.sales-sheet .sales-peach .sales-goods-total td,
.sales-sheet .sales-peach .sales-goods-total td.sales-out-peach,
.sales-sheet .sales-green-values td,
.sales-sheet .sales-blue tfoot td:not([data-out]),
.sales-sheet .sales-3d tbody tr:hover > td,
.sales-sheet .sales-3d tbody tr:focus-within > td,
.sales-sheet .sales-3d tbody tr:nth-child(even) > td {
  background: #ffffff;
  background-image: none;
  box-shadow: none;
}

/* The actual revenue keeps its emphasis through its text, not a filled cell. */
.sales-sheet .sales-3d td.sales-out-orange {
  background: #ffffff;
  background-image: none;
  box-shadow: none;
  color: #b45309;
  text-shadow: none;
}

.sales-sheet .sales-3d input,
.sales-sheet .sales-3d textarea {
  background: #ffffff;
}

/* Row labels and total lines on white too; only the column headers keep their colour. */
.sales-sheet .sales-3d tbody th,
.sales-sheet .sales-3d tfoot th,
.sales-sheet .sales-blue tbody th,
.sales-sheet .sales-blue tfoot th,
.sales-sheet .sales-peach tbody th,
.sales-sheet .sales-peach tfoot th,
.sales-sheet .sales-week.sales-3d tfoot th,
.sales-sheet .sales-goods-total th,
.sales-sheet .sales-3d tbody tr:focus-within > th {
  background: #ffffff;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

/* Summary under the sheet: row labels in the Hamkorbank brand green. */
.sales-sheet .sales-final .sales-3d tbody th {
  background: linear-gradient(180deg, #1fb862 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 #174a43;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-right-color: #128a46;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.sales-sheet .sales-final .sales-3d {
  --edge: #174a43;
  border-color: #17a755;
}

/* Clear grid lines: every cell of the sheet's tables has a visible border, like a spreadsheet. */
.sales-sheet .sales-3d {
  border: 1px solid #8f9cad;
}

.sales-sheet .sales-3d th,
.sales-sheet .sales-3d td {
  border-right: 1px solid #a9b4c2;
  border-bottom: 1px solid #a9b4c2;
}

.sales-sheet .sales-3d tr > :last-child {
  border-right: 0;
}

.sales-sheet .sales-3d tbody:last-child tr:last-child > *,
.sales-sheet .sales-3d tfoot tr:last-child > * {
  border-bottom: 0;
}

/* The header row is set off from the rows below by a darker line. */
.sales-sheet .sales-3d thead th {
  border-bottom: 2px solid #8f9cad;
}

.sales-sheet .sales-3d tfoot tr:first-child > * {
  border-top: 2px solid #8f9cad;
}

/* Typed cells: a clear frame of their own. */
.sales-sheet .sales-3d input,
.sales-sheet .sales-3d textarea {
  border: 1px solid #94a3b8;
}

.sales-sheet fieldset:disabled .sales-3d input,
.sales-sheet fieldset:disabled .sales-3d textarea {
  border-color: #cbd5e1;
}

/* Realizatsiya alokador: the related company of the sheet. */
.trade-party {
  margin-bottom: 14px;
}

.trade-party select {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 38px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: 600 15px var(--app-font);
}

.trade-party select:focus {
  border-color: #16a34a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.sales-party-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border: 1px solid #17a755;
  border-radius: 12px;
  background: linear-gradient(180deg, #1fb862 0%, #17a755 100%);
  box-shadow: 0 2px 0 #174a43;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.sales-party-chip em {
  font-style: normal;
}

.sales-party-chip[hidden] {
  display: none;
}

.sales-party-name {
  display: block;
  margin-bottom: 2px;
  color: #15803d;
  font-weight: 800;
}

/* Kalkulyatsiya: the loan repayment schedule, laid out like the bank's sheet. */
.schedule-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-icon {
  color: #17a755;
  font-size: 22px;
}

.schedule-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 18px 24px 0;
}

.schedule-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.schedule-controls select,
.schedule-controls input {
  height: 40px;
  min-width: 220px;
  padding: 0 12px;
  border: 1px solid #94a3b8;
  border-radius: 9px;
  background: #fff;
  font: 600 15px var(--app-font);
}

.schedule-hint {
  margin-bottom: 10px;
  color: #64748b;
}

.schedule-head {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 360px);
  gap: 24px;
  align-items: start;
  margin: 18px 24px 0;
}

.schedule-params,
.schedule-rates {
  width: 100%;
  border: 1px solid #8f9cad;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 0 #c9d6c0, 0 12px 24px -10px rgba(15, 23, 42, 0.25);
}

.schedule-params th,
.schedule-params td,
.schedule-rates th,
.schedule-rates td {
  padding: 7px 12px;
  border-bottom: 1px solid #c3ccd8;
  font-variant-numeric: tabular-nums;
}

.schedule-params tr:last-child > *,
.schedule-rates tr:last-child > * {
  border-bottom: 0;
}

.schedule-params th {
  width: 52%;
  border-right: 1px solid #c3ccd8;
  color: #1f2937;
  font-weight: 700;
  text-align: right;
}

.schedule-params td {
  font-weight: 700;
  text-align: right;
}

/* The values taken from the Info page: the sheet's yellow input cells. */
.schedule-params td.schedule-input {
  background: linear-gradient(180deg, #fffdf0 0%, #fff6c2 100%);
  box-shadow: inset 0 1px 0 #ffffff;
}

.schedule-params tr.strong > * {
  color: #14532d;
  font-weight: 800;
}

.schedule-side {
  display: grid;
  gap: 16px;
}

.schedule-rates {
  box-shadow: 0 4px 0 #ecc9a8, 0 12px 24px -10px rgba(15, 23, 42, 0.25);
}

.schedule-rates th,
.schedule-rates td {
  background: linear-gradient(180deg, #fff6ef 0%, #fde2cc 100%);
  border-right: 1px solid #e8c3a3;
  font-weight: 700;
}

.schedule-rates td {
  border-right: 0;
  text-align: right;
}

.schedule-rates tr.current > * {
  background: linear-gradient(180deg, #fde2cc 0%, #f8c9a3 100%);
  font-weight: 800;
}

.schedule-equivalent th {
  font-style: italic;
}

.schedule-card .table-scroll {
  margin-top: 6px;
}

.schedule-table th,
.schedule-table td {
  white-space: nowrap;
}

.schedule-table tbody td {
  border-right: 1px solid #c3ccd8;
  border-bottom: 1px solid #c3ccd8;
}

/* The issue date line, as on the bank's sheet. */
.schedule-table tr.schedule-start > td {
  background: linear-gradient(180deg, #ede4fd 0%, #d9c8fb 100%);
  color: #3b0764;
  font-weight: 800;
  text-align: right;
}

.schedule-table tr.schedule-start > td:nth-child(2) {
  text-align: left;
}

/* Grace months: interest only. */
.schedule-table tr.schedule-grace > td {
  background: #f8fafc;
  color: #475569;
}

.schedule-table tfoot th {
  border-top: 2px solid #8f9cad;
  background: #e2f0d9;
  color: #14532d;
}

@media (max-width: 1000px) {
  .schedule-head {
    grid-template-columns: 1fr;
  }
}

/* Repayment schedule: columns as wide as their figures, not stretched over the page. */
.schedule-card .schedule-table {
  width: auto;
  min-width: 760px;
}

.schedule-card .schedule-table th,
.schedule-card .schedule-table td {
  padding: 8px 14px;
}

.schedule-card .schedule-table th:nth-child(1),
.schedule-card .schedule-table td:nth-child(1) {
  width: 44px;
  text-align: center;
}

.schedule-card .schedule-table td:nth-child(2) {
  width: 110px;
}

.schedule-card .schedule-table td:nth-child(n+3) {
  min-width: 130px;
}

.schedule-card .schedule-table thead th {
  white-space: normal;
  text-align: center;
}

/* Kalkulyatsiya rates: plain white, like the other tables. */
.schedule-rates,
.schedule-rates th,
.schedule-rates td,
.schedule-rates tr.current > * {
  background: #ffffff;
  background-image: none;
}

.schedule-rates {
  box-shadow: 0 4px 0 #c9d6c0, 0 12px 24px -10px rgba(15, 23, 42, 0.25);
}

.schedule-rates th,
.schedule-rates td {
  border-right: 1px solid #c3ccd8;
  color: #1f2937;
}

.schedule-rates td {
  border-right: 0;
}

.schedule-rates th small {
  color: #64748b;
  font-weight: 600;
}

.schedule-side .schedule-hint {
  margin: 0;
}

/* Kalkulyatsiya: the card as wide as the schedule; grace months marked with ✕. */
.schedule-card {
  width: fit-content;
  max-width: 100%;
  min-width: min(980px, 100%);
}

.schedule-card .schedule-table th.schedule-mark-head,
.schedule-card .schedule-table td.schedule-mark {
  width: 44px;
  min-width: 44px;
  padding: 4px;
  text-align: center;
}

.schedule-mark-box {
  display: inline-flex;
  cursor: pointer;
}

.schedule-mark-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.schedule-mark-box span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 2px 3px rgba(15, 23, 42, 0.1);
  color: transparent;
  font-weight: 900;
  transition: background 0.15s, color 0.15s;
}

.schedule-mark-box:hover span {
  border-color: #dc2626;
  color: #fca5a5;
}

.schedule-mark-box input:checked + span {
  border-color: #b91c1c;
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 2px 0 #7f1d1d;
  color: #ffffff;
}

.schedule-mark-box input:focus-visible + span {
  outline: 3px solid rgba(220, 38, 38, 0.3);
  outline-offset: 1px;
}

.schedule-mark-off {
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}

.schedule-params td small {
  color: #64748b;
  font-weight: 600;
}

.schedule-table tr.schedule-grace > td {
  background: #fff7f7;
}

/* Columns after the ✕ one moved by one: date third, sums from the fourth. */
.schedule-card .schedule-table td:nth-child(2) {
  width: 44px;
  min-width: 44px;
}

.schedule-card .schedule-table td:nth-child(3) {
  width: 110px;
  min-width: 0;
}

.schedule-card .schedule-table td:nth-child(n+4) {
  min-width: 130px;
}

/* Kalkulyatsiya: the monthly payment in the loan's currency and in sums. */
.schedule-payment thead th {
  background: linear-gradient(180deg, #1fb862 0%, #17a755 55%, #128a46 100%);
  border-right: 0;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.schedule-payment tbody th {
  text-align: left;
}

.schedule-payment td {
  font-weight: 800;
  white-space: nowrap;
}

/* Kalkulyatsiya: too many grace months marked. */
.schedule-limit {
  margin: 16px 24px 0;
  border-left: 4px solid #dc2626;
  line-height: 1.6;
  transition: opacity 0.6s ease;
}

.schedule-limit a {
  color: #b91c1c;
  font-weight: 800;
  text-decoration: underline;
}

.schedule-limit.fading {
  opacity: 0;
}

.schedule-limit[hidden] {
  display: none;
}

/* Kalkulyatsiya: the three tables on the right equally wide, figures on one line. */
.schedule-head {
  grid-template-columns: minmax(0, 560px) minmax(0, 460px);
}

.schedule-side .schedule-rates {
  width: 100%;
  table-layout: fixed;
}

.schedule-side .schedule-rates tbody th {
  width: 52%;
}

.schedule-side .schedule-rates td {
  width: 48%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The schedule as wide as the tables above it. */
.schedule-card .schedule-table {
  width: 100%;
  min-width: 760px;
}

.schedule-head {
  grid-template-columns: 560px 460px;
}

/* Info: "with costing" next to the analysis type. */
.with-calculation {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #b9c3d4;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c7d0dd;
  color: #1f2a44;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.with-calculation input {
  width: 18px;
  height: 18px;
  accent-color: #17a755;
}

.with-calculation i {
  color: #17a755;
}

.with-calculation:has(input:checked) {
  border-color: #17a755;
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}

/* Kalkulyatsiya: costings, one tab each. */
.calc-card {
  max-width: 1180px;
}

.calc-icon {
  margin-right: 10px;
  color: #17a755;
}

.calc-part {
  margin: 18px 24px 0;
}

.calc-params {
  width: min(720px, 100%);
}

.calc-params th {
  width: 300px;
  text-align: left;
}

.calc-params input,
.calc-params select {
  width: 100%;
}

.calc-hint {
  margin: 0 0 10px;
  color: #475569;
  font-size: 14px;
}

.calc-hint i {
  color: #17a755;
}

.calc-goods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.calc-goods-group {
  min-width: 260px;
  margin: 0;
  padding: 8px 14px 12px;
  border: 1px solid #c7d0dd;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 3px 0 #d5dce6, 0 6px 14px rgba(15, 23, 42, 0.06);
}

.calc-goods-group legend {
  padding: 0 6px;
  color: #0f7a3c;
  font-weight: 800;
}

.calc-good {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

.calc-good input {
  width: 17px;
  height: 17px;
  accent-color: #17a755;
}

.calc-good.taken {
  color: #94a3b8;
  cursor: not-allowed;
}

.calc-good small {
  font-style: italic;
}

.calc-missing {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  color: #b91c1c;
  font-weight: 800;
}

.calc-lines {
  width: 100%;
}

.calc-lines td:first-child {
  width: 44px;
  text-align: center;
}

.calc-lines input,
.calc-lines select {
  width: 100%;
}

.calc-lines .sales-out,
.calc-lines tfoot td {
  min-width: 150px;
  text-align: right;
  font-weight: 800;
}

.calc-line-actions {
  width: 84px;
  white-space: nowrap;
}

.calc-line-remove {
  width: 30px;
  height: 30px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff1f2;
  color: #dc2626;
  cursor: pointer;
}

.calc-add {
  margin-top: 10px;
}

.calc-form.viewing .calc-add {
  display: none;
}

.calc-form.viewing .calc-line-actions button {
  visibility: hidden;
}

.calc-lines select[name="line_kind"] {
  min-width: 160px;
}

.calc-lines input.money {
  text-align: right;
}

.calc-result {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.calc-summary th {
  color: #0f7a3c;
  text-align: left;
}

.calc-summary td,
.calc-shares td {
  min-width: 150px;
  text-align: right;
  font-weight: 800;
}

.calc-unit-cost td {
  color: #0f7a3c;
  font-size: 18px;
}

.calc-shares thead th {
  background: linear-gradient(180deg, #1fb862 0%, #17a755 55%, #128a46 100%);
  color: #ffffff;
  text-align: center;
}

.calc-saved {
  margin: 14px 24px 0;
  color: #0f7a3c;
  font-weight: 800;
  transition: opacity 0.6s ease;
}

.calc-saved.fading {
  opacity: 0;
}

.sales-button.delete {
  border-color: #b91c1c;
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 3px 0 #991b1b;
  color: #fff;
}

.calc-form .sales-sheet-buttons {
  margin: 20px 24px 24px;
}

/* Realizatsiya: a purchase price taken from a costing. */
.sales-linked {
  position: relative;
}

.sales-linked input[data-linked] {
  padding-left: 26px;
  background: #f0fdf4 !important;
  color: #0f7a3c;
  font-weight: 800;
  cursor: not-allowed;
}

.sales-link-mark {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  color: #17a755;
  font-size: 12px;
  pointer-events: none;
}

/* Kalkulyatsiya: the panels and cells of the Realizatsiya sheet. */
.calc-form.sales-sheet {
  padding-bottom: 0;
}

.calc-form .sales-block.calc-part {
  margin: 24px 24px 0;
}

.calc-form select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #94a3b8;
  border-radius: 7px;
  background: #ffffff;
  font: inherit;
}

.calc-form select:focus {
  border-color: #16a34a;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.calc-form fieldset:disabled select {
  border-color: #cbd5e1;
  color: #111827;
  opacity: 1;
}

.calc-params th {
  font-size: 16px;
}

.calc-params th b {
  color: #dc2626;
}

.calc-params input,
.calc-params select {
  font-size: 16px;
  font-weight: 700;
}

.calc-form .calc-result {
  margin-top: 24px;
}

/* Kalkulyatsiya: "Related" next to the tabs. */
.calc-related-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px auto;
  padding: 7px 14px;
  border: 1px solid #b9c3d4;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c7d0dd;
  color: #1f2a44;
  font-weight: 800;
  cursor: pointer;
}

.calc-related-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.calc-related-toggle i {
  color: #2563eb;
}

.calc-related-toggle:has(input:checked) {
  border-color: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}

.calc-related-toggle:has(input:disabled) {
  cursor: default;
}

.calc-params select[hidden] {
  display: none;
}

.calc-lines tfoot .calc-unit-cost td {
  color: #0f7a3c;
  font-size: 18px;
}

/* Kalkulyatsiya list. */
.calc-list td {
  vertical-align: middle;
}

.calc-list .calc-list-date {
  white-space: nowrap;
}

.calc-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #0f7a3c;
  font-weight: 800;
  white-space: nowrap;
}

.calc-owner.related {
  background: #dbeafe;
  color: #1d4ed8;
}

.calc-list-good {
  font-weight: 700;
}

.calc-list .calc-list-cost {
  color: #0f7a3c;
  font-weight: 800;
}

/* Kalkulyatsiya: goods still free in green, those with a costing in yellow. */
.calc-params select option.calc-option-free {
  color: #15803d;
  font-weight: 700;
}

.calc-params select option.calc-option-taken {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
}

.calc-params select.chosen {
  color: #15803d;
}

.calc-params select option[value=""] {
  color: #475569;
}

.calc-taken-warning {
  margin: 10px 0 0;
  border-left: 4px solid #f59e0b;
  line-height: 1.6;
  transition: opacity 0.6s ease;
}

.calc-taken-warning a {
  margin-left: 6px;
  color: #b45309;
  font-weight: 800;
  text-decoration: underline;
}

.calc-taken-warning.fading {
  opacity: 0;
}

.calc-taken-warning[hidden] {
  display: none;
}

/* Realizatsiya goods: the name wraps in its cell and is shown in full. */
.sales-good-name {
  min-width: 260px;
}

.sales-sheet textarea.sales-wrap {
  display: block;
  min-height: 36px;
  overflow: hidden;
  resize: none;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Section pages: which case is open, and in which mode. */
.case-bar-facts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-left: 14px;
  font-size: 15px;
  font-weight: 800;
  color: #1f2a44;
}

.case-bar-facts small {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.case-bar-facts > span:not(.status-chip) {
  padding: 4px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
}

.case-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 5px 12px;
  border: 1px solid #16a34a;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.case-mode.viewing {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1d4ed8;
}

/* Tabs that need an open case first. */
.tab.locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

.tab-lock {
  margin-left: 4px;
  font-size: 12px;
}

.choose-case-alert {
  margin: 16px 0 0;
  border-left: 4px solid #f59e0b;
}

/* The organization name and its label stay on one line; the facts wrap after them. */
.org-bar {
  flex-wrap: wrap;
  row-gap: 8px;
  white-space: nowrap;
}

.org-bar .case-bar-facts {
  white-space: nowrap;
}

/* The open case's bar: name, then its facts as raised cards, the mode and the list link. */
.org-bar {
  gap: 12px 18px;
  padding: 16px 22px;
  white-space: normal;
}

.org-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.org-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 0 #0b6431, 0 6px 12px rgba(19, 144, 72, 0.25);
  color: #ffffff;
  font-size: 17px;
}

.org-label {
  color: #475569;
  font-size: 16px;
  font-weight: 700;
}

.org-title em.chosen {
  color: #0f5132;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.org-bar .case-bar-facts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

.case-fact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid #d5dce6;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 0 #c7d0dd, 0 6px 12px rgba(15, 23, 42, 0.08);
}

.case-fact > i {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 rgba(0, 0, 0, 0.18);
  color: #ffffff;
  font-size: 14px;
}

.case-fact > span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.case-fact small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.case-fact b {
  color: #1f2a44;
  font-size: 15px;
  font-weight: 900;
}

.case-fact b.status-chip {
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 13px;
}

.org-bar-end {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.org-bar-end .cases-link {
  margin-left: 0;
}

.org-bar .case-mode {
  margin-left: 0;
  padding: 8px 14px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 0 #86efac, 0 6px 12px rgba(22, 163, 74, 0.15);
}

.org-bar .case-mode.viewing {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 0 #93c5fd, 0 6px 12px rgba(37, 99, 235, 0.15);
}

/* Section tabs on top, the open case's bar under them: one rounded block. */
.case-head {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.case-head > .tabs-card,
.case-head > .tabs-card.alone,
.case-head > .org-bar,
.case-head > .view-banner {
  border-radius: 0;
}

.case-head > .org-bar {
  border-top: 1px solid #cbd5e1;
  box-shadow: none;
}

/* "Applications list" at the tabs' top right corner. */
.tabs-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tabs-card > .tabs {
  flex: 1;
}

.tabs-card > .cases-link {
  flex: none;
  margin-left: auto;
}

/* Info: required blocks. */
.required-star {
  margin-left: 6px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #dc2626;
  font: 900 30px/0.6 var(--app-font);
  vertical-align: middle;
  cursor: help;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.required-star:hover,
.required-star:focus-visible {
  color: #991b1b;
  outline: none;
  transform: scale(1.15);
}

.required-tip {
  position: fixed;
  z-index: 60;
  max-width: 360px;
  padding: 10px 14px;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 10px;
  background: #fff1f2;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  color: #991b1b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.required-tip[hidden],
.required-missing[hidden] {
  display: none;
}

.required-missing {
  margin: 0 0 16px;
}

.required-missing ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.info-sheet .field-missing {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

/* Sign-in pages: the ScoReo mark (its S turning slowly) and the bank's logo under it. */
.scoreo-brand {
  position: absolute;
  top: max(58vh, 470px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.scoreo-logo {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}

.scoreo-icon {
  width: clamp(110px, 12vw, 172px);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(12, 17, 28, 0.32));
}

.scoreo-s {
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: scoreo-turn 4s ease-in-out infinite;
}

/* 30° to the right and back, then 30° to the left and back, without a rest. */
@keyframes scoreo-turn {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(30deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-30deg);
  }
}

.scoreo-word {
  color: #0e1320;
  font: 700 clamp(84px, 10.5vw, 150px) / 1 "Segoe UI Variable Display", "Segoe UI", "Nunito", sans-serif;
  letter-spacing: -0.03em;
  text-shadow: 0 10px 22px rgba(12, 17, 28, 0.12);
}

.scoreo-word span {
  color: #4f9f86;
}

.scoreo-tagline {
  margin: 4px 0 0;
  padding-left: 0.6em;
  color: #6b7280;
  font: 600 clamp(14px, 1.4vw, 20px) "Segoe UI", "Nunito", sans-serif;
  letter-spacing: 0.6em;
  text-transform: uppercase;
}

.scoreo-partner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(18px, 3vh, 34px);
  padding-top: clamp(14px, 2.2vh, 22px);
  border-top: 1px solid rgba(14, 19, 32, 0.12);
}

.scoreo-partner img {
  width: clamp(180px, 17vw, 250px);
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
}

@media (prefers-reduced-motion: reduce) {
  .scoreo-s {
    animation: none;
  }
}

@media (max-width: 800px) {
  .scoreo-brand {
    top: 70%;
  }
}

/* The credit dialog: the actual rate only for a loan in a foreign currency. */
.credit-field[hidden] {
  display: none;
}

/* Realizatsiya lists: the line just saved keeps the table's own background. */
.cases-table.sales-table tr.just-saved td {
  background: transparent;
  animation: none;
}

/* Sign-in pages: the light background a little darker. */
.desk::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.14) 0%, rgba(15, 23, 42, 0.2) 100%);
  pointer-events: none;
}

/* Sign-in window: a raised card in the bank's green, with 3D fields and button. */
.desk-dialog {
  width: 480px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6f9 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #cfd8e3,
    0 6px 0 #b8c4d2,
    0 18px 36px rgba(15, 23, 42, 0.28),
    0 40px 70px rgba(15, 23, 42, 0.18);
}

.desk-dialog header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  color: #ffffff;
  font: 800 18px var(--app-font, "Nunito"), "Segoe UI", sans-serif;
  letter-spacing: 0.3px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.desk-dialog header::before {
  content: "\f2f6";
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 rgba(0, 0, 0, 0.15);
  font: 900 16px "Font Awesome 6 Free";
  text-shadow: none;
}

.desk-dialog-body {
  padding: 26px 24px 22px;
  border: 0;
  font-family: var(--app-font, "Nunito"), "Segoe UI", sans-serif;
}

.desk-row {
  margin-bottom: 18px;
}

.desk-row label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #1f2a44;
  font: 800 15px var(--app-font, "Nunito"), "Segoe UI", sans-serif;
}

.desk-row label::before {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #0b6431;
  color: #ffffff;
  font: 900 13px "Font Awesome 6 Free";
}

.desk-row label[for="username"]::before {
  content: "\f2c2";
}

.desk-row label[for="password"]::before,
.desk-row label[for^="id_new_password"]::before {
  content: "\f023";
}

.desk-row label[for="email"]::before {
  content: "\f0e0";
}

.desk-row input,
.desk-row input.desk-short {
  max-width: 250px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #b9c3d4;
  border-radius: 11px;
  background: linear-gradient(180deg, #f3f6f9 0%, #ffffff 45%);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12), 0 1px 0 #ffffff;
  color: #0e1320;
  font: 700 17px var(--app-font, "Nunito"), "Segoe UI", sans-serif;
  letter-spacing: 0.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.desk-row input.desk-short {
  text-align: left;
}

.desk-row input:focus {
  border-color: #17a755;
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(23, 167, 85, 0.18), 0 6px 14px rgba(23, 167, 85, 0.16);
  transform: translateY(-1px);
}

.desk-actions {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

.desk-actions a {
  color: #128a46;
  font: 700 14px var(--app-font, "Nunito"), "Segoe UI", sans-serif;
  text-decoration: none;
  border-bottom: 1px dashed rgba(18, 138, 70, 0.5);
}

.desk-actions a:hover {
  color: #0b6431;
  border-bottom-style: solid;
}

.desk-actions button,
.desk-actions .desk-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 30px;
  border: 1px solid #0f7a3c;
  border-radius: 11px;
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 0 #0b6431, 0 10px 18px rgba(19, 144, 72, 0.3);
  color: #ffffff;
  font: 800 16px var(--app-font, "Nunito"), "Segoe UI", sans-serif;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}

.desk-actions button::after {
  content: "\f061";
  font: 900 13px "Font Awesome 6 Free";
}

.desk-actions button:hover,
.desk-actions .desk-button:hover {
  background: linear-gradient(180deg, #2cc46d 0%, #139048 100%);
  filter: brightness(1.06);
}

.desk-actions button:active,
.desk-actions .desk-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 #0b6431, 0 4px 8px rgba(19, 144, 72, 0.25);
}

.desk-error {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 10px;
  background: #fff1f2;
  color: #991b1b;
  font: 700 14px var(--app-font, "Nunito"), "Segoe UI", sans-serif;
}

.desk-note {
  font-family: var(--app-font, "Nunito"), "Segoe UI", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .desk-row input,
  .desk-actions button {
    transition: none;
  }
}

/* The larger sign-in card: the mark sits lower, clear of it; both fields the same width. */
.scoreo-brand {
  top: max(63vh, 570px);
}

.desk-row {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 12px;
}

.desk-row input,
.desk-row input.desk-short {
  width: 100%;
  max-width: none;
}

/* Sign-in pages: the system's blue-grey (--bg, #5d73a0) instead of the green backgrounds. */
.desk-banner {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px rgba(29, 41, 70, 0.3);
}

.desk-dialog header {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
}

.desk-row label::before {
  background: linear-gradient(180deg, #6d82ad 0%, #4d6290 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 0 #3a4c75;
}

.desk-row input:focus {
  border-color: #5d73a0;
  box-shadow: 0 0 0 4px rgba(93, 115, 160, 0.2), 0 6px 14px rgba(93, 115, 160, 0.18);
}

.desk-actions a {
  color: #4d6290;
  border-bottom-color: rgba(77, 98, 144, 0.5);
}

.desk-actions a:hover {
  color: #3a4c75;
}

.desk-actions button,
.desk-actions .desk-button,
.desk-actions button:hover,
.desk-actions .desk-button:hover {
  border-color: #3f5282;
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 0 #3a4c75, 0 10px 18px rgba(77, 98, 144, 0.32);
}

.desk-actions button:active,
.desk-actions .desk-button:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #3a4c75, 0 4px 8px rgba(77, 98, 144, 0.25);
}

/* Table headers (applications, Realizatsiya, alokador, Kalkulyatsiya and Grafik lists): the
   system's blue-grey (--bg, #5d73a0) instead of green. */
.cases-table thead th {
  border-bottom-color: #3a4c75;
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
}

/* Larger header and total text in the list tables (applications, Realizatsiya, alokador,
   Kalkulyatsiya, Grafik). */
.cases-table thead th {
  font-size: 18px;
  line-height: 1.3;
}

.cases-table tfoot th {
  font-size: 19px;
}

/* Realizatsiya alokador: the related companies table's header in the system's blue-grey. */
.separate-parties-table thead th {
  padding: 13px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 4px solid #3a4c75;
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  vertical-align: middle;
}

.separate-parties-table thead th:first-child {
  border-top-left-radius: 11px;
}

.separate-parties-table thead th:last-child {
  border-right: 0;
  border-top-right-radius: 11px;
}

/* Info page: 16px in the fields, the block titles 19px, bold and black. */
.info-sheet input,
.info-sheet select,
.info-sheet textarea {
  font-size: 16px;
}

.info-sheet .info-card > h2 {
  color: #000000;
  font-size: 19px;
  font-weight: 900;
}

/* Realizatsiya sheets: the active tab and the summary labels in the system's blue-grey. */
.sales-tabs {
  border-bottom-color: #5d73a0;
}

.sales-tab.active {
  border-color: #4d6290;
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 -2px 8px rgba(77, 98, 144, 0.3);
}

.sales-tab.active b {
  color: #4d6290;
}

.sales-sheet .sales-final .sales-3d tbody th {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 #3a4c75;
  border-right-color: #4d6290;
}

.sales-sheet .sales-final .sales-3d {
  --edge: #3a4c75;
  border-color: #5d73a0;
}

/* Section tabs: larger labels. */
.tabs .tab {
  font-size: 21px;
}

/* Cash Flow: the bank's sheet as a 3D table, grey labels, coloured totals. */
.cf-card {
  max-width: 1500px;
}

.cf-icon {
  margin-right: 10px;
  color: #5d73a0;
}

.cf-form {
  padding: 8px 24px 24px;
}

.cf-company {
  margin: 10px 0 16px;
  color: #0e1320;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.3px;
}

.cf-table {
  width: 100%;
  border: 1px solid #8f9cad;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 0 #c9d2de, 0 14px 26px -10px rgba(15, 23, 42, 0.28);
}

.cf-table + .cf-table,
.table-scroll + .table-scroll {
  margin-top: 18px;
}

.cf-table th,
.cf-table td {
  padding: 8px 10px;
  border-right: 1px solid #c3ccd8;
  border-bottom: 1px solid #c3ccd8;
  font-size: 16px;
  vertical-align: middle;
}

.cf-table tr > :last-child {
  border-right: 0;
}

.cf-table input,
.cf-table select,
.cf-table textarea {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 2px 3px rgba(15, 23, 42, 0.08);
  font: inherit;
}

.cf-table input:focus,
.cf-table select:focus,
.cf-table textarea:focus {
  border-color: #5d73a0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(93, 115, 160, 0.2);
}

.cf-table input.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cf-form fieldset:disabled input,
.cf-form fieldset:disabled select,
.cf-form fieldset:disabled textarea {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #111827;
}

/* Grey label column, as in the bank's sheet. */
.cf-table th {
  background: linear-gradient(180deg, #e7ebf0 0%, #d5dbe3 100%);
  color: #1f2a44;
  font-weight: 800;
  text-align: left;
}

.cf-season th {
  width: 320px;
}

.cf-season .cf-input-cell {
  width: 200px;
}

.cf-season .credit-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cf-main thead th {
  padding: 12px 10px;
  border-bottom: 4px solid #3a4c75;
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  color: #ffffff;
  font-size: 17px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.cf-main thead th.cf-note-head {
  background: linear-gradient(180deg, #fff9c4 0%, #fef08a 100%);
  color: #1f2a44;
  font-style: italic;
  text-shadow: none;
}

.cf-main .cf-sign {
  width: 28px;
  padding: 0;
  background: linear-gradient(180deg, #e7ebf0 0%, #d5dbe3 100%);
  color: #1f2a44;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.cf-main .cf-label {
  min-width: 300px;
}

.cf-main .cf-col,
.cf-main .cf-out,
.cf-main .cf-input-cell {
  min-width: 170px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cf-main .cf-out {
  font-weight: 700;
}

.cf-main .cf-total-col {
  background: #f1f4f8;
  font-weight: 800;
}

.cf-main .cf-note-cell {
  min-width: 320px;
}

.cf-main .negative {
  color: #b91c1c;
}

.cf-row-revenue .cf-out {
  background: #fbcfe8;
  font-weight: 900;
}

.cf-row-cost .cf-out {
  background: #dcfce7;
}

.cf-row-sum .cf-out,
.cf-row-sum .cf-label {
  background: #fef9c3;
  font-weight: 900;
}

.cf-row-italic .cf-label,
.cf-row-italic .cf-out {
  font-style: italic;
}

.cf-row-strong .cf-label,
.cf-row-net .cf-label {
  font-size: 17px;
}

.cf-row-net > * {
  border-top: 2px solid #3a4c75;
  border-bottom: 0;
}

.cf-row-net .cf-out,
.cf-row-net .cf-label {
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
  font-size: 18px;
  font-weight: 900;
}

.cf-net-currency {
  font-weight: 700;
  text-align: right;
}

.cf-net-currency b {
  color: #3a4c75;
  font-size: 18px;
}

.cf-line-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cf-line .cf-label {
  font-weight: 600;
}

.cf-add-row td {
  background: #f8fafc;
}

.cf-form.viewing .cf-add-row,
.cf-form.viewing .cf-line-remove {
  display: none;
}

.cf-bank-note th {
  width: 320px;
}

.cf-form .sales-sheet-buttons {
  margin-top: 20px;
}

.cf-saved {
  margin: 14px 24px 0;
}

.cf-main thead th.cf-total-col {
  background: linear-gradient(180deg, #5b6f99 0%, #4d6290 55%, #3f5282 100%);
  color: #ffffff;
}

.cf-season .credit-unit {
  position: relative;
}

.cf-season .credit-unit input {
  padding-right: 34px;
}

.cf-season .credit-unit span {
  position: absolute;
  right: 12px;
  color: #64748b;
  font-weight: 800;
  pointer-events: none;
}

.cf-main .cf-label {
  min-width: 420px;
}

/* Cash Flow: whose activity each column is. */
.cf-main thead .cf-owner {
  display: block;
  width: fit-content;
  margin: 0 0 6px auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-shadow: none;
  white-space: nowrap;
}

.cf-main thead .cf-owner.related {
  background: #fde68a;
  color: #78350f;
}

/* Cash Flow: the grey label, sign and total cells in the system's blue-grey; an actions column. */
.cf-table th,
.cf-main .cf-sign {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.cf-main .cf-total-col {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  color: #ffffff;
}

.cf-main .cf-total-col.negative {
  color: #fecaca;
}

/* Sum rows keep their highlight; their label and sign in the sheet's yellow, dark text. */
.cf-row-sum .cf-label,
.cf-row-net .cf-label,
.cf-row-sum .cf-sign,
.cf-row-net .cf-sign {
  color: #1f2a44;
  text-shadow: none;
}

.cf-row-sum .cf-sign {
  background: #fef9c3;
}

.cf-row-net .cf-sign {
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
}

.cf-main .cf-line .cf-label input {
  color: #1f2a44;
  text-shadow: none;
}

.cf-main .cf-actions-head {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  color: #ffffff;
  white-space: nowrap;
}

.cf-main .cf-actions {
  width: 92px;
  white-space: nowrap;
  text-align: center;
}

.cf-main .cf-actions button + button {
  margin-left: 6px;
}

.cf-form.viewing .cf-actions button {
  visibility: hidden;
}

/* Cash Flow: no yellow in the main table; sum rows stand out by weight and a rule, not colour. */
.cf-main thead th.cf-note-head {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.cf-row-sum .cf-out,
.cf-row-net .cf-out {
  background: #ffffff;
}

.cf-row-sum .cf-label,
.cf-row-net .cf-label,
.cf-row-sum .cf-sign,
.cf-row-net .cf-sign {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.cf-row-sum > *,
.cf-row-net > * {
  border-top: 2px solid #8f9cad;
}

/* Larger text on the page. */
.cf-card > h2 {
  font-size: 22px;
}

.cf-company {
  font-size: 26px;
}

.cf-table th,
.cf-table td {
  font-size: 18px;
}

.cf-table input,
.cf-table select,
.cf-table textarea {
  font-size: 18px;
}

.cf-main thead th {
  font-size: 19px;
}

.cf-main thead .cf-owner {
  font-size: 13px;
}

.cf-row-strong .cf-label,
.cf-row-net .cf-label {
  font-size: 19px;
}

.cf-row-net .cf-out,
.cf-row-net .cf-label {
  font-size: 20px;
}

.cf-net-currency,
.cf-net-currency b {
  font-size: 19px;
}

.cf-row-sum .cf-out.cf-total-col,
.cf-row-net .cf-out.cf-total-col {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  color: #ffffff;
}

/* Cash Flow tables in 3D: a raised slab with a thick edge, bevelled headers and labels,
   sunken fields and slightly domed figures. */
.cf-table {
  border: 1px solid #7c8aa3;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #c9d2de,
    0 5px 0 #aab6c7,
    0 7px 0 #94a2b6,
    0 22px 34px -14px rgba(15, 23, 42, 0.45);
}

.cf-table th,
.cf-main .cf-sign,
.cf-main .cf-total-col {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.12);
}

.cf-main thead th {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.cf-main .cf-out:not(.cf-total-col) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 244, 249, 0.6) 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(15, 23, 42, 0.06);
}

.cf-table input,
.cf-table select,
.cf-table textarea {
  border-color: #8f9cad;
  background: linear-gradient(180deg, #f3f6f9 0%, #ffffff 45%);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.14), inset 0 -1px 0 #ffffff, 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.cf-table input:focus,
.cf-table select:focus,
.cf-table textarea:focus {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(93, 115, 160, 0.22), 0 5px 12px rgba(93, 115, 160, 0.22);
  transform: translateY(-1px);
}

.cf-form fieldset:disabled .cf-table input,
.cf-form fieldset:disabled .cf-table select,
.cf-form fieldset:disabled .cf-table textarea {
  background: transparent;
  box-shadow: none;
}

.cf-form fieldset:disabled .cf-table th input {
  color: #ffffff;
}

.cf-row-net > * {
  border-top: 3px solid #3a4c75;
}

@media (prefers-reduced-motion: reduce) {
  .cf-table input,
  .cf-table select,
  .cf-table textarea {
    transition: none;
  }

  .cf-table input:focus {
    transform: none;
  }
}

/* Cash Flow: revenue and cost figures on grey; the company and owner chips raised in green;
   the page title larger, without a band, in relief. */
.cf-row-revenue .cf-out:not(.cf-total-col),
.cf-row-cost .cf-out:not(.cf-total-col) {
  background: linear-gradient(180deg, #f3f4f6 0%, #e2e5ea 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(15, 23, 42, 0.08);
}

.cf-company {
  display: table;
  margin: 14px auto 22px;
  padding: 12px 34px;
  border: 1px solid #0f7a3c;
  border-radius: 14px;
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.15),
    0 4px 0 #0b6431,
    0 14px 24px -8px rgba(11, 100, 49, 0.45);
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cf-main thead .cf-owner {
  padding: 4px 12px;
  border: 1px solid #0f7a3c;
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 2px 0 #0b6431;
  color: #ffffff;
  font-size: 15px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.cf-main thead .cf-owner.related {
  border-color: #b45309;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 2px 0 #92400e;
  color: #ffffff;
}

.cf-card > h2 {
  border-bottom: 0;
  background: none;
  color: #1f2a44;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 0 #ffffff, 0 2px 0 #c9d2de, 0 3px 0 #b3bfcf, 0 6px 10px rgba(15, 23, 42, 0.25);
}

.cf-card > h2 .cf-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 0 #c9d2de) drop-shadow(0 4px 6px rgba(15, 23, 42, 0.25));
}

/* The case bar: larger text in relief, deeper 3D cards. */
.org-label {
  font-size: 18px;
  text-shadow: 0 1px 0 #ffffff;
}

.org-title em.chosen,
.org-title em {
  font-size: 25px;
  text-shadow: 0 1px 0 #ffffff, 0 2px 0 #c9d2de, 0 3px 0 #b3bfcf, 0 5px 8px rgba(15, 23, 42, 0.22);
}

.org-icon {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.case-fact {
  gap: 12px;
  padding: 7px 18px 7px 7px;
  border-color: #c3ccd8;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 0 rgba(15, 23, 42, 0.05),
    0 2px 0 #d5dce6,
    0 4px 0 #b8c4d2,
    0 12px 18px -6px rgba(15, 23, 42, 0.25);
}

.case-fact > i {
  width: 38px;
  height: 38px;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 3px 0 rgba(0, 0, 0, 0.22);
}

.case-fact small {
  font-size: 12.5px;
}

.case-fact b {
  font-size: 18px;
  text-shadow: 0 1px 0 #ffffff, 0 2px 3px rgba(15, 23, 42, 0.15);
}

.case-fact b.status-chip {
  padding: 2px 10px;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(15, 23, 42, 0.15);
}

.org-bar .case-mode {
  font-size: 15px;
}

/* Grafik: 3D tables, larger text; no yellow or purple fills; the total line in brand green. */
.schedule-params,
.schedule-rates,
.schedule-card .schedule-table {
  border: 1px solid #7c8aa3;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #c9d2de,
    0 5px 0 #aab6c7,
    0 7px 0 #94a2b6,
    0 22px 34px -14px rgba(15, 23, 42, 0.45);
}

.schedule-params th,
.schedule-params td,
.schedule-rates th,
.schedule-rates td,
.schedule-card .schedule-table th,
.schedule-card .schedule-table td {
  font-size: 17px;
}

.schedule-card .schedule-table thead th {
  font-size: 17px;
}

.schedule-params th {
  box-shadow: inset -1px 0 0 #ffffff;
}

.schedule-params td,
.schedule-params td.schedule-input {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(15, 23, 42, 0.05);
}

.schedule-table tr.schedule-start > td {
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
  color: #1f2a44;
  border-bottom: 2px solid #8f9cad;
}

.schedule-card .schedule-table tbody td {
  box-shadow: inset 0 1px 0 #ffffff;
}

.schedule-table tfoot th {
  border-top: 3px solid #0b6431;
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.schedule-table tfoot th.sales-number {
  text-align: right;
}

/* Grafik: the loan's currency line in brand green. */
.schedule-rates tr.current > th,
.schedule-rates tr.current > td {
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  border-right-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Grafik: the issue date line in brand green, raised. */
.schedule-table tr.schedule-start > td {
  border-bottom: 3px solid #0b6431;
  border-right-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Grafik: larger text throughout the page. */
.schedule-card > h2 {
  font-size: 24px;
}

.schedule-controls label {
  font-size: 16px;
}

.schedule-controls input,
.schedule-controls select {
  font-size: 17px;
}

.schedule-params th,
.schedule-params td,
.schedule-rates th,
.schedule-rates td,
.schedule-card .schedule-table th,
.schedule-card .schedule-table td {
  font-size: 19px;
}

.schedule-card .schedule-table thead th,
.schedule-rates thead th {
  font-size: 18px;
}

.schedule-table tfoot th {
  font-size: 20px;
}

.schedule-params td small {
  font-size: 15px;
}

/* Larger figures need a wider column for the rates and payment tables. */
.schedule-head {
  grid-template-columns: minmax(0, 560px) minmax(0, 560px);
}

/* Kalkulyatsiya sheet: the part titles in the system's blue-grey; the costs table header and
   the "Related" switch in brand green. */
.calc-form .sales-block > .sales-part-title {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.calc-form .sales-block > .sales-part-title b {
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 #3a4c75;
  color: #4d6290;
  text-shadow: none;
}

.calc-form .sales-block {
  border-color: #b8c3d6;
}

.sales-sheet.calc-form .sales-3d.calc-lines thead th {
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid #0b6431;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.calc-related-toggle,
.calc-related-toggle:has(input:checked) {
  border-color: #0f7a3c;
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #0b6431, 0 8px 14px -4px rgba(11, 100, 49, 0.4);
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.calc-related-toggle i {
  color: #ffffff;
}

.calc-related-toggle input {
  accent-color: #0b6431;
}

/* Cash Flow notes: one line in the cell; a double click opens the whole note. */
.cf-main .cf-note-cell input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.cf-form fieldset:disabled .cf-main .cf-note-cell input {
  pointer-events: none;
}

.cf-main .cf-note-cell {
  cursor: zoom-in;
}

.cf-note-modal {
  width: min(640px, 92vw);
}

.cf-note-row {
  margin: 4px 0 10px;
  color: #1f2a44;
  font-size: 17px;
  font-weight: 800;
}

.cf-note-modal textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12);
  font: 17px/1.5 var(--app-font);
  resize: vertical;
}

.cf-note-modal textarea[readonly] {
  background: #f8fafc;
}

/* Realizatsiya sheets (borrower and related): table headers in the system's blue-grey,
   larger text throughout. */
.sales-sheet table.sales-3d thead th {
  border-bottom: 3px solid #3a4c75;
  border-right-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.16);
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.sales-sheet:not(.calc-form) .sales-3d th,
.sales-sheet:not(.calc-form) .sales-3d td {
  font-size: 17px;
}

.sales-sheet:not(.calc-form) table.sales-3d thead th {
  font-size: 17px;
}

.sales-sheet:not(.calc-form) input,
.sales-sheet:not(.calc-form) textarea,
.sales-sheet:not(.calc-form) select {
  font-size: 17px;
}

.sales-sheet:not(.calc-form) .sales-part-title {
  font-size: 20px;
}

.sales-sheet:not(.calc-form) > h2 {
  font-size: 22px;
}

.sales-sheet:not(.calc-form) .sales-tab {
  font-size: 16px;
}

/* Realizatsiya sheets: the three part titles larger. */
.sales-sheet:not(.calc-form) .sales-block > .sales-part-title {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.sales-sheet:not(.calc-form) .sales-block > .sales-part-title b {
  width: 38px;
  height: 38px;
  font-size: 20px;
}

/* The mode badge: larger; new records in amber. */
.org-bar .case-mode {
  gap: 9px;
  padding: 9px 18px;
  font-size: 18px;
}

.org-bar .case-mode.new {
  border-color: #d97706;
  background: #fef3c7;
  color: #b45309;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 0 #fcd34d, 0 6px 12px rgba(217, 119, 6, 0.15);
}

/* Realizatsiya alokador: the related companies' rows, easier to read. */
.separate-parties-table tbody td {
  padding: 12px 12px;
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  vertical-align: middle;
}

.separate-parties-table tbody td.info-number {
  font-weight: 800;
}

/* Aktiv: one 3D table; each group's header raised in the system's blue-grey with its sum. */
.asset-card {
  max-width: 1500px;
}

.asset-card > h2 {
  border-bottom: 0;
  background: none;
  color: #1f2a44;
  font-size: 26px;
  font-weight: 900;
  text-shadow: 0 1px 0 #ffffff, 0 2px 0 #c9d2de, 0 3px 0 #b3bfcf, 0 6px 10px rgba(15, 23, 42, 0.25);
}

.asset-icon {
  margin-right: 10px;
  color: #17a755;
}

.asset-form {
  padding: 8px 24px 24px;
}

.asset-table {
  width: 100%;
  border: 1px solid #7c8aa3;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 0 #c9d2de,
    0 5px 0 #aab6c7,
    0 7px 0 #94a2b6,
    0 22px 34px -14px rgba(15, 23, 42, 0.45);
}

.asset-col-name { width: 34%; }
.asset-col-year { width: 12%; }
.asset-col-owner { width: 30%; }
.asset-col-value { width: 15%; }
.asset-col-actions { width: 96px; }

.asset-table th,
.asset-table td {
  padding: 8px 10px;
  border-right: 1px solid #c3ccd8;
  border-bottom: 1px solid #c3ccd8;
  font-size: 18px;
  vertical-align: middle;
}

.asset-table tr > :last-child {
  border-right: 0;
}

.asset-head th {
  padding: 12px 10px;
  border-top: 3px solid #3a4c75;
  border-right-color: rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.16);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.asset-group:first-child .asset-head th {
  border-top: 0;
}

.asset-head th:first-child {
  text-align: left;
}

.asset-head th.asset-total {
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  font-size: 20px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.asset-table input,
.asset-table textarea {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #8f9cad;
  border-radius: 8px;
  background: linear-gradient(180deg, #f3f6f9 0%, #ffffff 45%);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.14), inset 0 -1px 0 #ffffff;
  font: inherit;
  font-size: 18px;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.asset-table textarea {
  display: block;
  min-height: 40px;
  overflow: hidden;
  resize: none;
  line-height: 1.35;
}

.asset-table input:focus,
.asset-table textarea:focus {
  border-color: #5d73a0;
  outline: none;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(93, 115, 160, 0.22), 0 5px 12px rgba(93, 115, 160, 0.22);
  transform: translateY(-1px);
}

.asset-table input.money,
.asset-table input.asset-year {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.asset-table input.asset-year {
  text-align: center;
}

.asset-form fieldset:disabled .asset-table input,
.asset-form fieldset:disabled .asset-table textarea {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #111827;
}

.asset-actions {
  white-space: nowrap;
  text-align: center;
}

.asset-actions button + button {
  margin-left: 6px;
}

.asset-form.viewing .asset-actions button {
  visibility: hidden;
}

.asset-form .sales-sheet-buttons {
  margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .asset-table input,
  .asset-table textarea {
    transition: none;
  }
}

/* Aktiv: the document, currency, value in currency and rate columns. */
.asset-card {
  max-width: none;
}

.asset-table {
  min-width: 1500px;
}

.asset-col-name { width: 22%; }
.asset-col-year { width: 8%; }
.asset-col-owner { width: 18%; }
.asset-col-doc { width: 13%; }
.asset-col-currency { width: 7%; }
.asset-col-foreign { width: 10%; }
.asset-col-rate { width: 8%; }
.asset-col-value { width: 11%; }
.asset-col-actions { width: 96px; }

.asset-head th {
  font-size: 16px;
}

.asset-head th:first-child {
  font-size: 17px;
}

.asset-table select {
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #8f9cad;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 #c7d0dd;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
}

.asset-table input:disabled,
.asset-table input[readonly] {
  border-color: #d5dce6;
  background: #f1f4f8;
  box-shadow: none;
  color: #1f2a44;
}

.asset-table input[readonly][data-asset-value] {
  font-weight: 800;
}

.asset-line.in-sums [data-asset-foreign],
.asset-line.in-sums [data-asset-rate] {
  visibility: hidden;
}

.asset-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.asset-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 14px;
}

.asset-file a {
  overflow: hidden;
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-file-remove {
  width: 22px;
  height: 22px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff1f2;
  color: #dc2626;
  cursor: pointer;
}

.asset-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 10px;
  border: 1px solid #7c3aed;
  border-radius: 8px;
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%);
  box-shadow: 0 2px 0 #c4b5fd;
  color: #5b21b6;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.asset-attach span {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-form.viewing .asset-attach,
.asset-form.viewing .asset-file-remove {
  display: none;
}

.asset-col-name { width: 20%; }
.asset-col-rate { width: 10%; }
.asset-table [data-asset-rate] {
  min-width: 130px;
}

/* Aktiv: larger text, a bigger title in relief, one-line name and owner, the document number. */
.asset-card > h2 {
  font-size: 34px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 #ffffff, 0 2px 0 #c9d2de, 0 3px 0 #b3bfcf, 0 4px 0 #a3b0c2, 0 8px 14px rgba(15, 23, 42, 0.3);
}

.asset-card > h2 .asset-icon {
  font-size: 30px;
  filter: drop-shadow(0 2px 0 #c9d2de) drop-shadow(0 4px 6px rgba(15, 23, 42, 0.25));
}

.asset-table th,
.asset-table td,
.asset-table input,
.asset-table select {
  font-size: 19px;
}

.asset-head th {
  font-size: 17px;
}

.asset-head th:first-child {
  font-size: 18px;
}

.asset-head th.asset-total {
  font-size: 21px;
}

.asset-table input.asset-expand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-form fieldset:disabled .asset-table input.asset-expand {
  pointer-events: none;
}

.asset-table td:has(.asset-expand) {
  cursor: zoom-in;
}

.asset-col-name { width: 18%; }
.asset-col-owner { width: 15%; }
.asset-col-number { width: 9%; }
.asset-col-doc { width: 12%; }

.asset-table {
  min-width: 1700px;
}

.asset-form .sales-sheet-buttons .sales-button {
  font-size: 17px;
}

#asset-text-dialog textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12);
  font: 18px/1.5 var(--app-font);
  resize: vertical;
}

#asset-text-dialog textarea[readonly] {
  background: #f8fafc;
}

/* Aktiv: the value in currency and the rate as columns only when a line is in a foreign
   currency; the Save button waits for Edit; a click on the locked table points at Edit. */
.asset-table.no-foreign col.asset-col-foreign,
.asset-table.no-foreign col.asset-col-rate {
  visibility: collapse;
}

.asset-table.no-foreign {
  min-width: 1400px;
}

.asset-form fieldset:disabled .asset-table input,
.asset-form fieldset:disabled .asset-table select {
  pointer-events: none;
}

.asset-form .sales-button.save:disabled {
  border-color: #b8c3d6;
  background: linear-gradient(180deg, #f1f4f8 0%, #dfe5ee 100%);
  box-shadow: 0 3px 0 #b8c3d6;
  color: #8a96a8;
  cursor: not-allowed;
  text-shadow: none;
}

.asset-edit-hint {
  align-self: center;
  margin-right: auto;
  padding: 8px 14px;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 16px;
  font-weight: 800;
}

.asset-edit-hint[hidden] {
  display: none;
}

@keyframes asset-pulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(23, 167, 85, 0.25), 0 3px 0 #0b6431; }
  60% { transform: scale(0.98); }
}

.sales-button.edit.pulse {
  animation: asset-pulse 0.7s ease 2;
}

@media (prefers-reduced-motion: reduce) {
  .sales-button.edit.pulse {
    animation: none;
  }
}

/* Debetor-Kreditor: two 3D lists side by side, the cash notes under them. */
.debt-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.debt-card .asset-table {
  min-width: 0;
}

.debt-col-amount { width: 34%; }
.debt-col-actions { width: 96px; }
.debt-col-label { width: 32%; }

.debt-cash {
  margin-top: 30px;
}

.debt-cash .debt-cash-title {
  font-size: 20px;
  text-align: center;
}

.debt-cash tbody th {
  background: linear-gradient(180deg, #eef1f6 0%, #dde3ec 100%);
  color: #1f2a44;
  font-size: 18px;
  font-weight: 800;
  text-align: left;
}

@media (max-width: 1100px) {
  .debt-sides {
    grid-template-columns: 1fr;
  }
}

/* Debetor-Kreditor: the payment term column. */
.debt-col-term { width: 24%; }
.debt-col-amount { width: 26%; }

.debt-table select {
  width: 100%;
  height: 42px;
  padding: 0 8px;
  border: 1px solid #8f9cad;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 #c7d0dd;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
}

.debt-form fieldset:disabled .debt-table select {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  appearance: none;
  color: #111827;
}

/* Debetor-Kreditor: liquid funds with coloured action icons. */
.debt-liquid .debt-col-label { width: 30%; }
.debt-col-sum { width: 18%; }
.liquid-col-actions { width: 250px; }

.liquid-actions {
  white-space: nowrap;
  text-align: center;
}

.icon-action {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 2px;
  border: 0;
  border-radius: 10px;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 3px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.icon-action:hover {
  filter: brightness(1.08);
}

.icon-action:active {
  transform: translateY(2px);
}

.icon-action:disabled {
  filter: grayscale(1);
  opacity: 0.35;
  cursor: not-allowed;
}

.icon-action.add { --c: linear-gradient(180deg, #2cc46d 0%, #139048 100%); }
.icon-action.remove { --c: linear-gradient(180deg, #f87171 0%, #dc2626 100%); }
.icon-action.attach { --c: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%); }
.icon-action.view { --c: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%); }
.icon-action.replace { --c: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); }

.debt-form.viewing .icon-action:not(.view) {
  visibility: hidden;
}

.liquid-files {
  margin-top: 6px;
}

.liquid-picked {
  display: block;
  margin-top: 4px;
  color: #5b21b6;
  font-size: 14px;
  font-weight: 700;
}

.liquid-picked[hidden] {
  display: none;
}

/* Debetor-Kreditor: "+" and an actions menu in each line. */
.debt-col-actions { width: 130px; }

.row-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.row-menu .case-menu-list {
  position: fixed;
  z-index: 80;
  min-width: 220px;
}

.row-menu .case-menu-list [role=menuitem] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #1f2a44;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.row-menu .case-menu-list [role=menuitem]:hover,
.row-menu .case-menu-list [role=menuitem]:focus-visible {
  background: #f1f5f9;
  outline: none;
}

.row-menu .case-menu-list .case-menu-danger {
  color: #b91c1c;
}

.row-menu .case-menu-list [aria-disabled="true"],
.row-menu .case-menu-list .last-line {
  opacity: 0.45;
  cursor: not-allowed;
}

.debt-form.viewing [data-debt-insert],
.debt-form.viewing [data-liquid-insert],
.debt-form.viewing .debt-table .row-menu,
.debt-form.viewing [data-edit-only] {
  display: none;
}

.debt-min-alert {
  margin: 16px 0 0;
  border-left: 4px solid #dc2626;
}

.debt-min-alert[hidden] {
  display: none;
}

/* Debetor-Kreditor: the standard liquid-funds names are labels, not fields. */
.debt-form .asset-table input.liquid-fixed {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #1f2a44;
  font-weight: 800;
  cursor: default;
  pointer-events: none;
}

/* Balans: the bank's sheet as one 3D table, assets left, liabilities right. */
.bal-card {
  max-width: 1500px;
}

.bal-table {
  min-width: 1100px;
}

.bal-col-label { width: 32%; }
.bal-col-value { width: 18%; }

.bal-table th,
.bal-table td {
  padding: 9px 12px;
  font-size: 18px;
}

.bal-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.bal-table th {
  text-align: left;
  font-weight: 600;
  background: #ffffff;
  color: #1f2a44;
}

.bal-table tr > :nth-child(2) {
  border-right: 2px solid #7c8aa3;
}

.bal-label.indent {
  padding-left: 30px;
}

.bal-label.red {
  color: #dc2626;
}

/* I. / II. group heads: the system's blue-grey, their sums in brand green. */
.bal-label.group {
  background: linear-gradient(180deg, #6d82ad 0%, #5d73a0 55%, #4d6290 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.16);
  color: #ffffff;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.bal-value.group {
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Sub-heads (1., 2., 3.): italic, light. */
.bal-label.sub,
.bal-value.sub {
  background: #eef1f6;
  font-style: italic;
  font-weight: 800;
}

/* Values taken from other pages; typed ones in the sheet's yellow. */
.bal-value.auto {
  background: #f4faf0;
}

.bal-value.typed {
  background: #fffbeb;
}

.bal-value.typed input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #f0d58a;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 2px 3px rgba(15, 23, 42, 0.08);
  font: inherit;
  text-align: right;
}

.bal-form fieldset:disabled .bal-value.typed input {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.bal-total th,
.bal-total td {
  border-top: 3px solid #3a4c75;
  background: linear-gradient(180deg, #fde68a 0%, #fbbf72 100%);
  color: #1f2a44;
  font-size: 20px;
  font-weight: 900;
}

.bal-extra td {
  background: #f4faf0;
}

.bal-gap td {
  padding: 4px;
  background: #f1f4f8;
}

.bal-ratio td {
  background: #fffbeb;
  font-size: 19px;
}

.bal-rate th,
.bal-rate td {
  font-weight: 900;
}

.bal-table .empty {
  background: #ffffff;
}

.bal-note {
  margin: 14px 0 0;
  color: #475569;
  font-size: 15px;
}

.bal-label.warn {
  color: #b45309;
  font-style: italic;
}

.bal-value.warn {
  background: #fffbeb;
  color: #b45309;
}

/* Realizatsiya goods: the kind of each line. */
.sales-good-kind select {
  width: 100%;
  min-width: 150px;
  height: 38px;
  padding: 0 6px;
  border: 1px solid #94a3b8;
  border-radius: 7px;
  background: #ffffff;
  font: inherit;
  font-weight: 700;
}

.sales-sheet fieldset:disabled .sales-good-kind select,
.sales-good-kind select:disabled {
  border-color: transparent;
  background: transparent;
  color: #111827;
  opacity: 1;
}

.sales-good-kind select {
  min-width: 190px;
}

/* Debetor-Kreditor: the creditors' source column. */
.debt-table[data-side=creditors] .debt-col-name { width: 26%; }
.debt-table[data-side=creditors] .debt-col-source { width: 24%; }
.debt-table[data-side=creditors] .debt-col-term { width: 18%; }
.debt-table[data-side=creditors] .debt-col-amount { width: 20%; }

/* The creditors table has one column more: it gets more room. */
.debt-sides {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.debt-table select {
  min-width: 0;
  padding-right: 22px;
}

/* Memorandum: the financial analysis next to the client's previous one. */
.memo-card h2 { font-size: 1.45rem; text-shadow: 0 2px 3px rgba(40, 55, 90, .25); }
.memo-source { margin: .2rem 0 .7rem; color: #4d6290; font-size: .95rem; }
.memo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem;
  box-shadow: 0 6px 16px rgba(40, 55, 90, .18); border-radius: 10px; overflow: hidden; }
.memo-table thead th { background: linear-gradient(#6d82ad, #4d6290); color: #fff; padding: .55rem .5rem;
  font-weight: 700; text-align: center; white-space: nowrap; }
.memo-table th, .memo-table td { border-bottom: 1px solid #dfe5f0; padding: .4rem .5rem; }
.memo-table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.memo-table tbody tr > :nth-child(6) { border-left: 3px solid #4d6290; }
.memo-label { text-align: left; font-weight: 500; color: #233; min-width: 13rem; }
.memo-table .bold { font-weight: 700; }
.memo-head { background: #eef2f9; color: #4d6290; font-weight: 700; text-align: center !important; }
.memo-section th { background: linear-gradient(#2cc46d, #128a46); color: #fff; text-align: center; font-size: 1.05rem;
  padding: .5rem; }
.memo-now { background: #f6f8fc; }
.memo-diff.negative, .memo-trend.negative { color: #c62828; }
.memo-table input.money, .memo-date { width: 8.5rem; text-align: right; padding: .25rem .4rem; border: 1px solid #b9c4da;
  border-radius: 6px; font: inherit; }
.memo-date { text-align: center; width: 7rem; color: #233; }
.memo-table .empty { background: #fff; }
.memo-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.memo-notes label { display: flex; flex-direction: column; gap: .35rem; font-weight: 700; color: #4d6290; }
.memo-notes textarea { font: inherit; padding: .5rem; border: 1px solid #b9c4da; border-radius: 8px; resize: vertical;
  box-shadow: inset 0 2px 4px rgba(40, 55, 90, .08); }
@media (max-width: 900px) { .memo-notes { grid-template-columns: 1fr; } }
/* Memorandum: ten columns fit the page without scrolling. */
.asset-table.memo-table th,
.asset-table.memo-table td { padding: 5px 6px; font-size: 14px; }
.asset-table.memo-table thead th { font-size: 14px; padding: 8px 6px; }
.asset-table.memo-table .memo-label { min-width: 0; white-space: normal; }
.asset-table.memo-table input.money { width: 100%; min-width: 0; padding: 4px 6px; font-size: 14px; }
.asset-table.memo-table input.memo-date { width: 100%; min-width: 0; padding: 4px 6px; font-size: 14px; }
.memo-table col.memo-col-label { width: 15%; }
.memo-table col.memo-col-num { width: 8.5%; }
.memo-table col.memo-col-small { width: 6.5%; }
.asset-table.memo-table { table-layout: fixed; }
.asset-table.memo-table td { overflow: hidden; text-overflow: ellipsis; }
.asset-table.memo-table { min-width: 1150px; }
/* Memorandum: the Cash Flow bar in the system blue-grey, its title over the left table;
   total rows light grey, every other cell plain white. */
.memo-section th { background: linear-gradient(180deg, #7383a9 0%, #66759c 55%, #56658b 100%); text-align: left;
  padding-left: 12px; text-shadow: 0 1px 2px rgba(20, 30, 60, .35); }
.memo-section th + th { border-left: 3px solid #4d6290; }
.memo-table .memo-now { background: #ffffff; }
.memo-table .total { background: #e9edf3; }

/* Memorandum: the date picker fits its column. */
.asset-table.memo-table input.memo-date { font-size: 12.5px; padding: 3px 2px; text-align: center; }

/* Memorandum: the DSCR / ICR choice. */
.asset-table.memo-table select.memo-norm { width: 100%; padding: 3px 4px; font: inherit; font-size: 14px; font-weight: 700;
  border: 1px solid #b9c4da; border-radius: 6px; background: #fff; text-align: right; }

/* Memorandum: larger type, readable at a glance. */
.asset-table.memo-table th,
.asset-table.memo-table td { font-size: 16.5px; padding: 7px 8px; }
.asset-table.memo-table thead th { font-size: 17px; padding: 10px 6px; }
.asset-table.memo-table input.money,
.asset-table.memo-table select.memo-norm { font-size: 16px; padding: 5px 6px; }
.asset-table.memo-table input.memo-date { font-size: 14.5px; }
.memo-section th { font-size: 18px !important; padding: 9px 12px !important; }
.memo-head { font-size: 17px !important; }
.memo-notes label { font-size: 17px; }
.memo-notes textarea { font-size: 16px; }
.asset-table.memo-table { min-width: 1250px; }
.memo-table col.memo-col-label { width: 16%; }
.memo-table col.memo-col-num { width: 9%; }
.memo-table col.memo-col-small { width: 7%; }
/* Memorandum: whole numbers fit their columns at the larger size. */
.asset-table.memo-table { min-width: 1100px; }
.asset-table.memo-table th,
.asset-table.memo-table td { font-size: 16px; padding: 7px 5px; }
.asset-table.memo-table td { text-overflow: clip; }
.memo-table col.memo-col-label { width: 13%; }
.memo-table col.memo-col-num { width: 10%; }
.memo-table col.memo-col-small { width: 7%; }

/* The ScoReo mark before the section tabs. */
.tabs-card { align-items: center; }
.scoreo-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin-right: 22px;
  padding: 6px 16px 6px 8px;
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none;
  box-shadow: 0 1px 0 #ffffff inset, 0 3px 0 #c9d2de, 0 10px 18px -8px rgba(15, 23, 42, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.scoreo-tab:hover { transform: translateY(-1px); box-shadow: 0 1px 0 #ffffff inset, 0 4px 0 #c9d2de, 0 14px 22px -8px rgba(15, 23, 42, 0.4); }
.scoreo-tab-icon { width: 42px; height: 42px; filter: drop-shadow(0 4px 6px rgba(12, 17, 28, 0.3)); }
.scoreo-tab-word {
  color: #0e1320;
  font: 700 30px / 1 "Segoe UI Variable Display", "Segoe UI", "Nunito", sans-serif;
  letter-spacing: -0.03em;
}
.scoreo-tab-word span { color: #4f9f86; }

/* The ScoReo mark in the row of tabs: no card behind it, raised in 3D, gently floating. */
.tabs .scoreo-tab-item { display: flex; align-items: center; margin-right: 6px; }
.scoreo-tab {
  margin-right: 0;
  padding: 4px 6px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: scoreo-float 3.2s ease-in-out infinite;
}
.scoreo-tab:hover { background: none; box-shadow: none; transform: none; animation-play-state: paused; }
.scoreo-tab-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 0 #3a4357) drop-shadow(0 5px 0 rgba(12, 17, 28, 0.35)) drop-shadow(0 10px 10px rgba(12, 17, 28, 0.35));
}
.scoreo-tab-word {
  font-size: 30px;
  text-shadow: 0 1px 0 #c6ccd8, 0 2px 0 #b3bacb, 0 3px 0 #9fa7bb, 0 4px 0 #8c95ab, 0 8px 12px rgba(12, 17, 28, 0.35);
}
.scoreo-tab-word span {
  text-shadow: 0 1px 0 #3f8a72, 0 2px 0 #367a65, 0 3px 0 #2e6b58, 0 4px 0 #265c4b, 0 8px 12px rgba(12, 17, 28, 0.35);
}
@keyframes scoreo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scoreo-tab, .scoreo-tab .scoreo-s { animation: none; }
}

/* Case list: larger type, easy to read. */
.cases-card h2 { font-size: 26px; }
.cases-card .cases-new { font-size: 17px; }
.cases-card .cases-filter label { font-size: 16px; }
.cases-card .cases-filter input,
.cases-card .cases-filter select { font-size: 17px; }
.cases-card .cases-search,
.cases-card .cases-clear { font-size: 17px; }
.cases-card .cases-table thead th { font-size: 18px; }
.cases-card .cases-table tbody td { font-size: 17.5px; }
.cases-card .cases-sub { font-size: 15px; }
.cases-card .currency-chip,
.cases-card .schedule-chip,
.cases-card .collateral-chip,
.cases-card .rs-chip { font-size: 15.5px; }
.cases-card .status-chip { font-size: 15px; }
.cases-card .case-menu-button { font-size: 16px; }
.cases-card .case-menu-list a,
.cases-card .case-menu-list button,
.cases-card .case-menu-list span { font-size: 16px; }
.cases-card .cases-found { font-size: 16px; }
.cases-card .related-empty { font-size: 17px; }
/* ScoReo in the tabs: a lighter 3D edge, crisp at this size. */
.scoreo-tab-word { text-shadow: 0 1px 0 #aeb6c7, 0 2px 0 #9aa3b6, 0 5px 8px rgba(12, 17, 28, 0.28); }
.scoreo-tab-word span { text-shadow: 0 1px 0 #3a7f69, 0 2px 0 #2f6d5a, 0 5px 8px rgba(12, 17, 28, 0.28); }
.scoreo-tab-icon { filter: drop-shadow(0 2px 0 #4a5468) drop-shadow(0 6px 8px rgba(12, 17, 28, 0.35)); }

/* The ScoReo mark marks the case list as the open page. */
.scoreo-tab.active { position: relative; }
.scoreo-tab.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3350c4, #4f9f86);
  box-shadow: 0 2px 6px rgba(51, 80, 196, 0.35);
}

/* The AI emblem in the top bar: a glowing tile, a turning ring and a twinkling spark. */
.ai-emblem {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-right: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: ai-glow 2.8s ease-in-out infinite;
  border-radius: 16px;
}
.ai-emblem svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 #1e1b4b) drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45)); }
.ai-emblem:hover { transform: translateY(-2px) scale(1.05); }
.ai-emblem:focus-visible { outline: 2px solid #a5f3fc; outline-offset: 3px; }
.ai-ring { transform-origin: 32px 32px; animation: ai-turn 3.5s linear infinite; }
.ai-spark { transform-origin: 47px 20px; animation: ai-twinkle 1.8s ease-in-out infinite; }
@keyframes ai-turn { to { transform: rotate(360deg); } }
@keyframes ai-twinkle {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.6; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
}
@keyframes ai-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 0 18px 2px rgba(6, 182, 212, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-emblem, .ai-ring, .ai-spark { animation: none; }
}

/* Its message: a text-message bubble under the emblem, closed with ×. */
.ai-message {
  position: fixed;
  inset: 78px auto auto 230px;
  width: min(380px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 16px 16px;
  border: 0;
  border-radius: 20px 20px 20px 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5ff 100%);
  color: #1f2937;
  box-shadow: 0 2px 0 #c7d2fe, 0 18px 40px -12px rgba(15, 23, 42, 0.55);
  overflow: visible;
}
.ai-message:popover-open { animation: ai-pop 0.22s ease-out; }
.ai-message::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 22px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  transform: rotate(45deg);
  border-radius: 3px;
}
@keyframes ai-pop { from { opacity: 0; transform: translateY(-8px) scale(0.96); } }
.ai-message-head { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ai-message-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #2563eb 55%, #06b6d4); color: #fff; font-size: 17px;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.4);
}
.ai-message-from { display: flex; flex-direction: column; line-height: 1.2; }
.ai-message-from b { font-size: 16px; color: #1e1b4b; }
.ai-message-from small { font-size: 12.5px; color: #64748b; }
.ai-message-close {
  margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eef2ff; color: #4338ca;
  font-size: 16px; cursor: pointer;
}
.ai-message-close:hover { background: #e0e7ff; color: #312e81; }
.ai-message-text {
  position: relative; margin: 0; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #e0f2fe;
  color: #0c4a6e; font-size: 16px; line-height: 1.45; font-weight: 600;
}
.ai-message-phone {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #2cc46d, #128a46); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 3px 0 #0e6d37, 0 8px 14px -6px rgba(18, 138, 70, 0.6);
}

/* Credit dialog: the ways of payment, several may be ticked. */
.credit-label { display: block; margin-bottom: 6px; font-weight: 700; color: #334155; }
.credit-label small { font-weight: 500; color: #64748b; }
.credit-multi { display: flex; flex-wrap: wrap; gap: 8px; }
.credit-multi-option {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px solid #b9c4da;
  border-radius: 999px; background: #fff; font-weight: 600; cursor: pointer; user-select: none;
  box-shadow: 0 2px 0 #dbe2ee; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.credit-multi-option input { width: 17px; height: 17px; margin: 0; accent-color: #17a755; }
.credit-multi-option:has(input:checked) { border-color: #17a755; background: #e8f8ee; color: #0f6b39; box-shadow: 0 2px 0 #9fd9b7; }
.credit-multi-option:has(input:focus-visible) { outline: 2px solid #5d73a0; outline-offset: 2px; }
.credit-field .credit-multi .credit-multi-option { display: inline-flex; align-items: center; gap: 9px; margin: 0; }
.credit-field .credit-multi .credit-multi-option input { flex: none; width: 17px; height: 17px; margin: 0; padding: 0; box-shadow: none; }

/* Kalkulyatsiya on one page: "Сформировать" and the table of formed costings under the form. */
.sales-button.calc-form-button {
  background: linear-gradient(180deg, #6d82ad 0%, #4d6290 100%);
  color: #fff;
  border-color: #3f5180;
  box-shadow: 0 3px 0 #33436b, 0 8px 14px -6px rgba(51, 67, 107, 0.6);
}
.sales-button.calc-form-button:hover { filter: brightness(1.08); }
.calc-table-part { margin-top: 22px; }
.calc-formed td, .calc-formed th { font-size: 16px; }
.calc-formed tr.calc-row-pending td { background: #fff8e1; }
.calc-formed tr.calc-row-open td { box-shadow: inset 0 0 0 9999px rgba(93, 115, 160, 0.08); }
.calc-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.calc-state.pending { background: #fef3c7; color: #92400e; }
.calc-state.saved { background: #dcfce7; color: #166534; }
.calc-pending-note { margin: 0 0 10px; padding: 9px 14px; border-radius: 10px; background: #fff7ed; color: #9a3412; font-weight: 600; }
.calc-table-actions { white-space: nowrap; }
.calc-table-actions .calc-discard { display: inline; margin: 0; }
.calc-icon-button {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 2px;
  border: 0; border-radius: 9px; color: #fff; cursor: pointer; text-decoration: none; font-size: 14px;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.25);
}
.calc-icon-button.view { background: #16a34a; }
.calc-icon-button.edit { background: #2563eb; }
.calc-icon-button.delete { background: #dc2626; }
.calc-icon-button:hover { filter: brightness(1.1); }
/* The formed costings fit the card: compact cells, the good's name wide enough. */
.calc-table-part .table-scroll .calc-formed { min-width: 0; width: 100%; }
.calc-formed th, .calc-formed td { padding: 8px 7px; font-size: 15px; }
.calc-formed thead th { white-space: normal; font-size: 14.5px; }
.calc-formed .calc-list-good { min-width: 150px; }
.calc-formed .calc-owner { font-size: 13.5px; padding: 3px 9px; white-space: nowrap; }
.calc-formed .calc-table-actions { width: 1%; }
.cases-card .cases-table.calc-formed thead th { font-size: 14.5px; padding: 9px 7px; white-space: normal; }
.cases-card .cases-table.calc-formed tbody td { font-size: 15px; padding: 8px 7px; }
.cases-card .cases-table.calc-formed .calc-owner { font-size: 13px; }
.calc-formed .calc-icon-button { width: 29px; height: 29px; margin: 0 1px; font-size: 13px; }
.cases-card .cases-table.calc-formed tbody td.calc-table-actions { padding: 6px 5px; }
.cases-card .cases-table.calc-formed tbody td.calc-list-date { white-space: nowrap; }

/* Leaving with changes not saved: the shared dialog. */
.leave-modal { width: min(460px, calc(100vw - 32px)); }
.leave-head { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }
.leave-text { margin: 4px 0; font-size: 17px; font-weight: 600; color: #7c2d12; line-height: 1.45; }
/* "Back to view mode", beside the mode badge. */
.case-mode-back {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #b9c4da; background: #fff; color: #4d6290; font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 0 2px 0 #d5dcea; white-space: nowrap;
}
.case-mode-back:hover { background: #eef2f9; }

/* The AI message: the phone and, beside it, the internal number. */
.ai-message-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ai-message-contacts .ai-message-phone { margin-top: 0; }
.ai-message-ext {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, #6d82ad, #4d6290); color: #fff; font-weight: 800;
  box-shadow: 0 3px 0 #33436b, 0 8px 14px -6px rgba(51, 67, 107, 0.6);
}

/* Saving on the way to another page. */
body.auto-saving, body.auto-saving * { cursor: progress !important; }

/* Balans: "Taqsimot", a tick that opens the table of the project's spending. */
.bal-dist-toggle {
  display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 12px; padding: 10px 18px; border-radius: 12px;
  border: 1px solid #b9c4da; background: #fff; font-size: 17px; font-weight: 800; color: #4d6290; cursor: pointer;
  box-shadow: 0 3px 0 #d5dcea, 0 10px 18px -10px rgba(15, 23, 42, 0.35);
}
.bal-dist-toggle input { width: 20px; height: 20px; accent-color: #17a755; }
.bal-dist-toggle:has(input:checked) { border-color: #17a755; background: #e8f8ee; color: #0f6b39; }
.bal-dist-table thead th { font-size: 15px; white-space: normal; line-height: 1.3; }
.bal-dist-col-label { width: 30%; }
.bal-dist-col-sum { width: 15%; }
.bal-dist-col-source { width: 27%; }
.bal-dist-col-term { width: 20%; }
.bal-dist-col-actions { width: 96px; }
.bal-dist-table textarea { resize: vertical; min-height: 44px; font-size: 15px; }
.bal-dist-table textarea.bal-dist-label { font-weight: 700; }
.bal-dist-table input.money { text-align: right; font-size: 16px; }
.asset-table.bal-dist-table { min-width: 0; width: 100%; table-layout: fixed; }
.bal-dist-table .asset-head th { font-size: 15px; white-space: normal; text-align: center; }
.bal-dist-table td { padding: 6px; }

/* Taqsimot cells keep their size; the whole text opens with a double click. */
.bal-dist-table textarea.bal-expand {
  height: 46px; min-height: 46px; max-height: 46px; resize: none; overflow: hidden; line-height: 1.35;
}
.bal-dist-table td:has(.bal-expand) { cursor: zoom-in; }
.bal-form fieldset:disabled .bal-dist-table textarea.bal-expand { pointer-events: none; }

/* Hisobot: the kinds of report down the left, the chosen one on the right. */
.report-card h2 { font-size: 1.45rem; text-shadow: 0 2px 3px rgba(40, 55, 90, .25); }
.report-title-icon { color: #4d6290; margin-right: 10px; }
.report-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: start; }
.report-menu {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px;
  background: linear-gradient(180deg, #6d82ad 0%, #4d6290 100%);
  box-shadow: 0 4px 0 #33436b, 0 18px 30px -14px rgba(15, 23, 42, 0.55);
}
.report-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff;
  color: #1e293b; font-size: 17px; font-weight: 800; text-decoration: none;
  box-shadow: 0 3px 0 #c9d2de, 0 8px 14px -8px rgba(15, 23, 42, 0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.report-item:hover { transform: translateX(3px); }
.report-item.active {
  background: linear-gradient(180deg, #2cc46d 0%, #128a46 100%); color: #fff;
  box-shadow: 0 3px 0 #0e6d37, 0 10px 18px -8px rgba(18, 138, 70, 0.7);
}
.report-item-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--c); color: #fff; font-size: 16px; flex: none; box-shadow: 0 2px 0 rgba(15, 23, 42, 0.25);
}
.report-item.active .report-item-icon { background: rgba(255, 255, 255, 0.22); }
.report-item-arrow { margin-left: auto; font-size: 13px; opacity: .55; }
.report-body {
  min-height: 360px; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid #dbe2ee;
  box-shadow: 0 4px 0 #dbe2ee, 0 18px 30px -16px rgba(15, 23, 42, 0.35);
}
.report-body-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 22px; color: #1e293b; }
.report-empty { display: grid; place-items: center; gap: 10px; padding: 60px 10px; color: #64748b; text-align: center; }
.report-empty i { font-size: 46px; color: var(--c); opacity: .75; }
.report-empty p { margin: 0; font-size: 17px; font-weight: 600; }
@media (max-width: 900px) { .report-layout { grid-template-columns: 1fr; } }

/* Hisobot: the format dialog. */
.report-modal { width: min(520px, calc(100vw - 32px)); }
.report-format-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #334155; }
.report-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.report-format {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border: 2px solid #dbe2ee;
  border-radius: 14px; background: #fff; cursor: pointer; font-weight: 800; font-size: 16px; color: #334155;
  box-shadow: 0 3px 0 #dbe2ee; transition: border-color .15s, background .15s;
}
.report-format input { position: absolute; opacity: 0; pointer-events: none; }
.report-format i { font-size: 30px; color: #4d6290; }
.report-format:has(input:checked) { border-color: #17a755; background: #e8f8ee; color: #0f6b39; box-shadow: 0 3px 0 #9fd9b7; }
.report-format:has(input:checked) i { color: #17a755; }
.report-format:has(input:focus-visible) { outline: 2px solid #5d73a0; outline-offset: 2px; }
.report-empty .report-open { margin-top: 6px; }
/* Hisobot: only the coloured icons and the names, on the page's own background. */
.report-layout { display: block; }
.report-menu { width: min(360px, 100%); padding: 4px 0; gap: 6px; background: none; box-shadow: none; border-radius: 0; }
.report-item, .report-item.active { padding: 10px 6px; background: none; color: #1e293b; box-shadow: none; border-radius: 10px; }
.report-item:hover { background: none; transform: translateX(4px); }
.report-item span { font-size: 18px; }
.report-item.active .report-item-icon { background: var(--c); }
.report-item-icon { width: 40px; height: 40px; font-size: 18px; box-shadow: 0 3px 0 rgba(15, 23, 42, .25), 0 8px 14px -8px rgba(15, 23, 42, .5); }
.report-item-arrow { color: #64748b; }
.report-card .report-menu { padding: 8px 0 10px 22px; }
/* Hisobot: no card behind the list either; the names in white on the page's blue-grey. */
.info-card.report-card { background: none; border: 0; box-shadow: none; }
.report-card h2 { color: #fff; border-bottom-color: rgba(255, 255, 255, .25); text-shadow: 0 2px 4px rgba(15, 23, 42, .45); }
.report-card .report-title-icon { color: #fff; }
.report-card .report-item, .report-card .report-item.active { color: #fff; text-shadow: 0 2px 4px rgba(15, 23, 42, .45); }
.report-card .report-item-arrow { color: rgba(255, 255, 255, .75); }
.report-card .report-item-icon { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 3px 0 2px rgba(15, 23, 42, .25), 0 10px 16px -8px rgba(15, 23, 42, .6); }
.cases-card.report-card h2 { background: none; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }

/* Credit documents: their list to the right of the reports, opened by its arrow. */
.report-card .report-layout { display: flex; align-items: flex-start; gap: 34px; }
button.report-item { width: 100%; border: 0; font: inherit; font-weight: 800; text-align: left; cursor: pointer; }
.report-group .report-item-arrow { margin-left: 14px; transition: transform .2s ease; }
.report-group.open .report-item-arrow { transform: translateX(4px); color: #fff; }
.report-card .report-submenu {
  position: relative; width: min(420px, 100%); padding: 8px 0 10px 24px; border-left: 2px solid rgba(255, 255, 255, .45);
  animation: report-slide .2s ease-out;
}
.report-card .report-submenu[hidden] { display: none; }
.report-card .report-doc span { font-size: 17px; }
.report-card .report-doc .report-item-icon { width: 34px; height: 34px; font-size: 15px; }
@keyframes report-slide { from { opacity: 0; transform: translateX(-10px); } }
@media (max-width: 900px) { .report-card .report-layout { flex-direction: column; } }

/* The format dialog: only the formats of the report chosen. */
.report-formats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.report-format[hidden] { display: none; }
.report-format .fa-file-word { color: #2b579a; }
.report-format .fa-file-image { color: #ea580c; }

/* Credit documents: what the system doesn't know, typed in the dialog. */
.report-modal { width: min(760px, calc(100vw - 32px)); }
.report-modal .credit-modal-body { max-height: calc(100vh - 230px); overflow: auto; }
.report-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.report-fields[hidden], .report-credit[hidden] { display: none; }
.report-field { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 700; color: #334155; }
.report-field.wide { grid-column: 1 / -1; }
.report-field input, .report-field textarea, .report-field select {
  padding: 8px 10px; border: 1px solid #b9c4da; border-radius: 8px; font: inherit; font-weight: 500; font-size: 14.5px;
}
.report-credit { margin-bottom: 12px; }

/* Hisobot with no case saved yet: a note that asks for the Info page first. */
.report-need-case {
  display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px 22px; padding: 10px 16px; border-radius: 12px;
  background: #fff7ed; color: #9a3412; font-size: 16px; font-weight: 700; box-shadow: 0 3px 0 #fed7aa;
}
.report-need-case a { color: #1d4ed8; text-decoration: underline; }
.report-need-case.flash { animation: report-flash .9s ease 2; }
@keyframes report-flash { 50% { background: #fde68a; transform: scale(1.02); } }

/* ==== Chat: a messenger look (rail, list, wallpaper, bubbles). Only the look changes. ==== */
.chat-window.tg {
  --tg-rail: #1f2b38;
  --tg-rail-text: #c5d0dc;
  --tg-active: #3a8fd9;
  --tg-mine: #e3fad3;
  --tg-mine-text: #1f2a1a;
  --tg-tick: #4fae4e;
  background: #fff;
  border-color: #c9d3df;
}
.chat-window.tg .chat-titlebar { padding: 8px 14px; font-size: 15px; }
.chat-window.tg .chat-titlebar button,
.chat-window.tg .chat-titlebar a { width: 32px; height: 32px; border-radius: 8px; }

.chat-window.tg .chat-body {
  grid-template-columns: 84px 340px minmax(0, 1fr);
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* The rail: the lists and the tools, an icon over its name. */
.chat-window.tg .chat-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 8px 0;
  overflow-y: auto;
  background: var(--tg-rail);
}
.chat-window.tg .chat-tabs,
.chat-window.tg .chat-toolbar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.chat-window.tg .chat-toolbar {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.chat-window.tg .chat-tabs button,
.chat-window.tg .chat-toolbar button,
.chat-window.tg .chat-toolbar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: auto;
  padding: 9px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tg-rail-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.chat-window.tg .chat-tabs button i,
.chat-window.tg .chat-toolbar button i,
.chat-window.tg .chat-toolbar a i { font-size: 21px; }
.chat-window.tg .chat-tabs button > span:not(.chat-dot),
.chat-window.tg .chat-toolbar button > span,
.chat-window.tg .chat-toolbar a > span:not(.chat-mail-badge) {
  display: -webkit-box;
  max-width: 76px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat-window.tg .chat-tabs button:hover,
.chat-window.tg .chat-toolbar button:hover,
.chat-window.tg .chat-toolbar a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.chat-window.tg .chat-tabs button.active { background: rgba(255, 255, 255, 0.09); color: #fff; }
.chat-window.tg .chat-tabs button.active i { color: #5fb1f5; }
.chat-window.tg .chat-toolbar button[aria-pressed="true"] { color: #fff; background: rgba(95, 177, 245, 0.25); }
.chat-window.tg .chat-dot,
.chat-window.tg .chat-mail-badge {
  position: absolute;
  top: 5px;
  right: 18px;
  min-width: 12px;
  height: 12px;
  margin: 0;
  border: 2px solid var(--tg-rail);
  border-radius: 999px;
  background: #4fae4e;
}
.chat-window.tg .chat-mail-badge {
  height: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 10.5px;
  line-height: 15px;
}
.chat-window.tg .chat-dot[hidden],
.chat-window.tg .chat-mail-badge[hidden] { display: none; }

/* The list: a search pill on top, round avatars, time on the right, unread counts. */
.chat-window.tg .chat-sidebar {
  border-right: 1px solid #dfe3e8;
  background: var(--chat-list-bg, #ffffff);
}
.chat-window.tg .chat-sidebar-head { padding: 10px 12px; background: transparent; }
.chat-window.tg .chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #f1f3f5;
  box-shadow: none;
}
.chat-window.tg .chat-search input { padding: 10px 0; border: 0; background: none; font-size: 15px; outline: none; }
.chat-window.tg .chat-search i { color: #8a96a3; }
.chat-window.tg .chat-items { padding: 0 6px 8px; }
.chat-window.tg .chat-item {
  gap: 12px;
  margin: 1px 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  box-shadow: none;
}
.chat-window.tg .chat-item:hover { background: #f1f3f5; }
.chat-window.tg .chat-item.active { background: var(--tg-active); }
.chat-window.tg .chat-item.active .chat-item-name,
.chat-window.tg .chat-item.active .chat-item-time,
.chat-window.tg .chat-item.active .chat-item-preview,
.chat-window.tg .chat-item.active .chat-item-seen,
.chat-window.tg .chat-item.active .chat-online { color: #fff; }
.chat-window.tg .chat-item .user-avatar { flex: none; width: 54px; height: 54px; font-size: 21px; }
.chat-window.tg .chat-item-name { color: #111827; font-size: 15.5px; font-weight: 700; }
.chat-window.tg .chat-item-time { color: #8a96a3; font-size: 12.5px; font-weight: 500; }
.chat-window.tg .chat-item-preview { color: #6b7785; font-size: 14px; font-weight: 400; }
.chat-window.tg .chat-unread {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #4fae4e;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.chat-window.tg .chat-item.active .chat-unread { background: #fff; color: var(--tg-active); }
.chat-window.tg .chat-item.draft { border-left: 0; background: #fff1f1; }
.chat-window.tg .chat-item.draft.active { background: var(--tg-active); }

/* The conversation: a white head, a green wallpaper with a light pattern. */
.chat-window.tg .chat-main {
  position: relative;
  background: var(--chat-log-bg, linear-gradient(160deg, #b4cf8d 0%, #8fbf86 45%, #6fa983 100%));
}
.chat-window.tg .chat-main::before {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.22) 1.6px, transparent 1.8px),
    radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.4px);
  background-position: 0 0, 14px 14px;
  background-size: 28px 28px;
  content: "";
  pointer-events: none;
}
.chat-window.tg .chat-dialog,
.chat-window.tg .chat-placeholder { position: relative; }
.chat-window.tg .chat-placeholder { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.chat-window.tg .chat-placeholder i,
.chat-window.tg .chat-placeholder h3,
.chat-window.tg .chat-placeholder p { color: #fff; }
.chat-window.tg .chat-placeholder h3 {
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
}
.chat-window.tg .chat-head {
  padding: 8px 18px;
  border-bottom: 1px solid #e3e6ea;
  background: #fff;
}
.chat-window.tg #chat-head { font-size: 16.5px; font-weight: 700; color: #111827; }
.chat-window.tg .chat-head .user-avatar { width: 42px; height: 42px; }
.chat-window.tg .chat-status { color: #8a96a3; font-weight: 500; }
.chat-window.tg .chat-status.online { color: #3a8fd9; font-weight: 600; }

/* Bubbles: the others' white on the left, mine light green on the right, each with a tail. */
.chat-window.tg .chat-log { gap: 4px; padding: 14px 7% 14px; background: none; }
.chat-window.tg .chat-bubble {
  position: relative;
  max-width: min(560px, 72%);
  padding: 6px 10px 5px 11px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  color: #111827;
  font-size: 15px;
  line-height: 1.38;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.14);
}
.chat-window.tg .chat-bubble::before {
  position: absolute;
  bottom: 0;
  left: -7px;
  width: 12px;
  height: 14px;
  background: inherit;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
}
.chat-window.tg .chat-bubble.mine {
  border-radius: 14px 14px 4px 14px;
  background: var(--tg-mine);
  color: var(--tg-mine-text);
}
.chat-window.tg .chat-bubble.mine::before {
  right: -7px;
  left: auto;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.chat-window.tg .chat-bubble-sender { color: #8e44ad; font-size: 14px; font-weight: 700; margin-bottom: 1px; }
.chat-window.tg .chat-bubble time {
  display: block;
  margin: 2px 0 0 14px;
  color: #8a96a3;
  font-size: 11.5px;
  opacity: 1;
  text-align: right;
}
.chat-window.tg .chat-bubble.mine time { color: #6aa75f; }
.chat-window.tg .chat-ticks { color: var(--tg-tick); }
.chat-window.tg .chat-ticks.read { color: var(--tg-tick); }
.chat-window.tg .chat-image img { border-radius: 10px; }
.chat-window.tg .chat-file { border-radius: 10px; }

/* Writing: one white bar, clip on the left, smile and send on the right. */
.chat-window.tg .chat-form { padding: 6px 12px; border-top: 1px solid #e3e6ea; background: #fff; }
.chat-window.tg .chat-compose { gap: 6px; }
.chat-window.tg .chat-compose textarea {
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 15.5px;
  box-shadow: none;
}
.chat-window.tg .chat-compose textarea:focus { border: 0; box-shadow: none; outline: none; }
.chat-window.tg .chat-attach,
.chat-window.tg .chat-emoji {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #8a96a3;
  font-size: 21px;
  box-shadow: none;
}
.chat-window.tg .chat-attach:hover,
.chat-window.tg .chat-emoji:hover { background: #f1f3f5; color: #3a8fd9; }
.chat-window.tg .chat-send {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--tg-active);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 2px 6px rgba(58, 143, 217, 0.45);
}
.chat-window.tg .chat-send:hover { background: #2f7fc6; }

@media (max-width: 900px) {
  .chat-window.tg .chat-body { grid-template-columns: 64px 260px minmax(0, 1fr); }
  .chat-window.tg .chat-tabs button > span:not(.chat-dot),
  .chat-window.tg .chat-toolbar button > span,
  .chat-window.tg .chat-toolbar a > span:not(.chat-mail-badge) { display: none; }
}
.chat-window.tg .chat-rail .chat-toolbar > * { color: var(--tg-rail-text); }
.chat-window.tg .chat-rail .chat-toolbar > *:hover { color: #fff; }
.chat-window.tg .chat-rail .chat-toolbar > [aria-pressed="true"] { color: #fff; }
.chat-window.tg .chat-rail .chat-toolbar i { color: inherit; }
.chat-window.tg #chat-new-group,
.chat-window.tg #chat-broadcast,
.chat-window.tg #chat-unread-only { color: var(--tg-rail-text); }
.chat-window.tg #chat-new-group:hover,
.chat-window.tg #chat-broadcast:hover,
.chat-window.tg #chat-unread-only:hover,
.chat-window.tg #chat-unread-only[aria-pressed="true"] { color: #fff; }

/* Stickers: a message of emoji alone, large, with no bubble behind it. */
.chat-window.tg .chat-bubble.sticker {
  padding: 0 2px;
  background: none;
  box-shadow: none;
  font-size: 64px;
  line-height: 1.1;
}
.chat-window.tg .chat-bubble.sticker::before { display: none; }
.chat-window.tg .chat-bubble.sticker time {
  display: inline-block;
  float: right;
  margin: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 11px;
  line-height: 1.6;
}
.chat-window.tg .chat-bubble.sticker .chat-ticks,
.chat-window.tg .chat-bubble.sticker .chat-ticks.read { color: #fff; }
.chat-window.tg .chat-bubble.sticker .chat-bubble-sender { font-size: 13px; }

/* The rail's icons in their own colours, bright on the dark rail. */
.chat-window.tg .chat-tabs [data-tab="people"] i { color: #4fb6ff; }
.chat-window.tg .chat-tabs [data-tab="groups"] i { color: #3ddc84; }
.chat-window.tg #chat-new-group i { color: #60a5fa; }
.chat-window.tg #chat-broadcast i { color: #c084fc; }
.chat-window.tg #chat-unread-only i { color: #f87171; }
.chat-window.tg .chat-mail-link i { color: #fbbf24; }
.chat-window.tg [popovertarget="chat-themes"] i { color: #2dd4bf; }
.chat-window.tg .chat-tabs button.active i { filter: brightness(1.15); }

/* A lower chat window over the page. */
.chat-overlay:not(.minimized) { height: min(640px, calc(100vh - 110px)); }

/* Stickers as pictures, sharp at any size. */
.chat-window.tg .chat-sticker { display: inline-flex; gap: 4px; }
.chat-window.tg .chat-sticker img { width: 96px; height: 96px; object-fit: contain; }
.chat-window.tg .chat-bubble.sticker { font-size: 72px; }

/* Mail and theme icons in colour too (they lost to a more general rule). */
.chat-window.tg .chat-rail .chat-toolbar .chat-mail-link i { color: #fbbf24; }
.chat-window.tg .chat-rail .chat-toolbar [popovertarget="chat-themes"] i { color: #2dd4bf; }

/* The chat window where the employee put it, at the size they gave it. */
.chat-overlay.placed:not(.minimized) {
  top: var(--chat-y);
  right: auto;
  left: var(--chat-x);
  width: var(--chat-w);
  max-width: none;
  height: var(--chat-h);
  margin: 0;
}
.chat-overlay.minimized .chat-resize { display: none; }
.chat-overlay.resizing iframe { pointer-events: none; }
.chat-overlay.moving { box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55); }
.chat-overlay.resizing { user-select: none; }
.chat-resize { position: absolute; z-index: 2; touch-action: none; }
.chat-resize-left { top: 14px; bottom: 14px; left: 0; width: 8px; cursor: ew-resize; }
.chat-resize-bottom { right: 14px; bottom: 0; left: 14px; height: 8px; cursor: ns-resize; }
.chat-resize-corner { bottom: 0; left: 0; width: 18px; height: 18px; cursor: nesw-resize; }
.chat-resize-right { top: 14px; right: 0; bottom: 14px; width: 8px; cursor: ew-resize; }
.chat-resize-top { top: 0; right: 14px; left: 14px; height: 5px; cursor: ns-resize; }
.chat-resize-corner-right { right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; }
.chat-resize-corner::after {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 9px;
  height: 9px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  border-left: 2px solid rgba(255, 255, 255, 0.75);
  content: "";
}
.chat-resize-left:hover, .chat-resize-bottom:hover, .chat-resize-right:hover, .chat-resize-top:hover { background: rgba(58, 143, 217, 0.35); }
/* A smaller chat window: its parts shrink with it, with no scrollbars of their own showing. */
.chat-frame .chat-window.tg .chat-body { min-height: 0; grid-template-columns: 84px minmax(200px, 340px) minmax(0, 1fr); }
.chat-window.tg .chat-rail { overflow-x: hidden; scrollbar-width: none; }
.chat-window.tg .chat-rail::-webkit-scrollbar { display: none; }
.chat-window.tg .chat-sidebar { min-width: 0; }

/* The title bar of the chat and of the mail moves the window. */
.chat-move-handle { cursor: move; user-select: none; }
.chat-move-handle :is(button, a, input, form) { cursor: pointer; }
.chat-move-handle input { cursor: text; }

/* The notifications as a window over the page, like the chat. */
.chat-frame #payments-window .payments-body { flex: 1; min-height: 0; overflow: auto; }
#payments-window .payments-back { border: 0; background: none; cursor: pointer; }
.notify-overlay.minimized { right: 452px; }

/* Message text as the employee set it (Theme): size, font, bold, italic, colour; and the
   backgrounds of their own messages and of the others'. Larger by default, to read easily. */
.chat-window.tg .chat-bubble,
.chat-look-sample span {
  font-family: var(--msg-font, inherit);
  font-size: var(--msg-size, 17px);
  font-style: var(--msg-style, normal);
  font-weight: var(--msg-weight, 400);
  line-height: 1.4;
}
.chat-window.tg .chat-bubble:not(.mine):not(.sticker),
.chat-look-sample .theirs { background: var(--tg-theirs, #fff); color: var(--msg-color, #111827); }
.chat-window.tg .chat-bubble.mine:not(.sticker),
.chat-look-sample .mine { background: var(--tg-mine, #e3fad3); color: var(--msg-color, var(--tg-mine-text, #1f2a1a)); }
.chat-window.tg .chat-bubble time,
.chat-window.tg .chat-bubble-sender { font-style: normal; }
.chat-window.tg .chat-bubble-sender { font-size: 15px; }
.chat-window.tg .chat-bubble time { font-size: 12px; font-weight: 400; }
.chat-window.tg .chat-compose textarea { font-size: 17px; }
.chat-window.tg .chat-item-name { font-size: 16.5px; }
.chat-window.tg .chat-item-preview { font-size: 15px; }

.chat-look-sample {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--chat-log-bg, #9cc58a);
}
.chat-look-sample span {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.14);
}
.chat-look-sample .theirs { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-look-sample .mine { align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-text-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  font-size: 14px;
  font-weight: 700;
}
.chat-text-row > span { min-width: 92px; }
.chat-text-row input[type="range"] { flex: 1; accent-color: #3a8fd9; }
.chat-text-row output { min-width: 28px; font-weight: 800; text-align: right; }
.chat-text-row select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}
.chat-text-toggle {
  padding: 6px 12px;
  border: 1px solid #c3cbdb;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.chat-text-toggle[aria-pressed="true"] { border-color: #3a8fd9; background: #3a8fd9; color: #fff; }
.chat-text-color { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; font-size: 13px; }
.chat-text-color input { width: 34px; height: 28px; padding: 0; border: 1px solid #c3cbdb; border-radius: 6px; }
.chat-window.tg .chat-bubble.sticker { font-size: 72px; font-style: normal; font-weight: 400; }

/* Themes behind the messages: larger tiles; the standard one marked with a star. */
.chat-swatches.chat-walls button {
  height: 40px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Writing: larger, in the font chosen for the messages, so it is easy to read. */
.chat-window.tg .chat-compose textarea {
  font-family: var(--msg-font, var(--app-font));
  font-size: max(18px, var(--msg-size, 18px));
  line-height: 1.35;
}
.chat-window.tg .chat-compose textarea::placeholder { color: #8a96a3; font-size: inherit; opacity: 1; }

/* Hisobot: a report not working yet, its message like a text message beside the button. */
.ai-message.report-soon-message { position: fixed; inset: auto; }
.ai-message.report-soon-message::before { top: 18px; left: -8px; }

/* ScoReo AI in the top bar: the system's mark, its name and an "AI" badge. A coloured edge turns
   around it, a light passes over it now and then, the S sways and the badge glows. */
@property --ai-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.ai-emblem.ai-brand {
  position: relative;
  flex: none;
  gap: 9px;
  width: auto;
  height: 48px;
  padding: 4px 14px 4px 5px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 15px;
  background:
    linear-gradient(180deg, #1d2536 0%, #0d1220 100%) padding-box,
    conic-gradient(from var(--ai-angle), #7c3aed, #2563eb, #06b6d4, #7ddcb7, #a855f7, #7c3aed) border-box;
  animation: ai-edge 4s linear infinite, ai-glow 2.8s ease-in-out infinite;
  transition: transform 0.18s ease;
}
.ai-emblem.ai-brand::after {
  position: absolute;
  inset: -2px auto -2px 0;
  width: 46px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-80px) skewX(-18deg);
  animation: ai-shine 4.5s ease-in-out infinite;
  content: "";
  pointer-events: none;
}
.ai-emblem.ai-brand:hover { transform: translateY(-2px); }
.ai-emblem.ai-brand .ai-brand-s {
  flex: none;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.ai-brand-word {
  color: #fff;
  font: 800 21px/1 "Nunito", "Segoe UI", sans-serif;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.ai-brand-word span { color: #7ddcb7; }
.ai-brand-chip {
  position: relative;
  padding: 4px 8px 3px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 55%, #06b6d4 100%);
  color: #fff;
  font: 900 14px/1 "Nunito", "Segoe UI", sans-serif;
  letter-spacing: 0.6px;
  animation: ai-chip 2.4s ease-in-out infinite;
}
.ai-emblem.ai-brand .ai-brand-spark {
  position: absolute;
  top: -5px;
  right: -6px;
  width: 13px;
  height: 13px;
  filter: none;
  transform-origin: center;
  animation: ai-twinkle 1.8s ease-in-out infinite;
}
@keyframes ai-edge { to { --ai-angle: 360deg; } }
@keyframes ai-shine {
  0%, 55% { transform: translateX(-80px) skewX(-18deg); }
  100% { transform: translateX(260px) skewX(-18deg); }
}
@keyframes ai-chip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
  50% { box-shadow: 0 0 12px 1px rgba(6, 182, 212, 0.75); }
}
@media (max-width: 1500px) {
  .ai-brand-word { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-emblem.ai-brand, .ai-emblem.ai-brand::after, .ai-brand-chip, .ai-brand-spark, .ai-brand-s .scoreo-s { animation: none; }
}

/* The administrator's and the underwriter's home page: their profile card and their functions. */
.role-panel { --role: #2563eb; --role-soft: #eff6ff; max-width: 1180px; margin: 22px auto; padding: 0 18px; }
.role-panel.role-administrator { --role: #7c3aed; --role-soft: #f5f3ff; }
.role-panel.role-underwriter { --role: #0f766e; --role-soft: #f0fdfa; }
.role-card {
  display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; padding: 22px 26px;
  border-radius: 18px; background: #fff; border-top: 6px solid var(--role);
  box-shadow: 0 3px 0 #c9d2de, 0 16px 30px -14px rgba(15, 23, 42, 0.45);
}
.role-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 92px; overflow: hidden;
  border-radius: 50%; background: var(--role); color: #fff; font-size: 38px; font-weight: 800;
  box-shadow: 0 0 0 5px var(--role-soft), 0 8px 16px -6px rgba(15, 23, 42, 0.5);
}
.role-avatar img { width: 100%; height: 100%; object-fit: cover; }
.role-who h1 { margin: 6px 0 2px; color: #0f172a; font-size: 28px; }
.role-who p { margin: 0; color: #64748b; font-weight: 600; }
.role-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px;
  background: var(--role-soft); color: var(--role); font-size: 14px; font-weight: 800;
}
.role-facts {
  display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0;
}
.role-facts div { padding: 9px 13px; border: 1px solid #e2e8f0; border-left: 3px solid var(--role); border-radius: 10px; }
.role-facts dt { color: #64748b; font-size: 12.5px; font-weight: 700; }
.role-facts dd { margin: 2px 0 0; color: #0f172a; font-size: 15.5px; font-weight: 700; word-break: break-word; }
.role-edit {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 10px; background: var(--role); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.35);
}
.role-edit:hover { filter: brightness(1.08); }
.role-title { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; color: #fff; font-size: 22px; }
.role-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.role-tile {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 18px;
  border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #c9d2de, 0 12px 22px -12px rgba(15, 23, 42, 0.45);
}
.role-tile h3 { margin: 2px 0 6px; color: #0f172a; font-size: 17px; }
.role-tile p { margin: 0 0 26px; color: #475569; font-size: 14px; line-height: 1.45; }
.role-tile-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--role-soft); color: var(--role); font-size: 20px;
}
.role-tile-count {
  min-width: 42px; padding: 4px 10px; border-radius: 12px; background: var(--role); color: #fff; font-size: 20px;
  text-align: center;
}
.role-soon {
  position: absolute; right: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 800;
}
@media (max-width: 700px) {
  .role-card { grid-template-columns: 1fr; text-align: center; }
  .role-avatar { justify-self: center; }
}

/* The administrator's pages: the row of tabs as the employee's, the lists under it. */
.admin-head .tabs-card { display: flex; align-items: center; }
.admin-role-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: #f5f3ff; color: #7c3aed; font-weight: 800; white-space: nowrap;
}
.admin-card h2 { display: flex; align-items: center; gap: 4px; }
.admin-count {
  margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 16px;
}
.admin-table td.admin-num { text-align: center; font-size: 17px; }
.admin-table tr.admin-off td { opacity: 0.55; }
.admin-empty { padding: 26px !important; color: #64748b; text-align: center; }
.admin-person { display: inline-flex; align-items: center; gap: 10px; }
.admin-avatar { flex: none; width: 38px; height: 38px; font-size: 16px; }
.admin-online { color: #16a34a; font-weight: 800; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.admin-filters a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid #c3cfe8; border-radius: 999px;
  background: #fff; color: #334155; font-weight: 700; text-decoration: none;
}
.admin-filters a b { padding: 0 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; }
.admin-filters a.active { border-color: #4d6290; background: #4d6290; color: #fff; }
.admin-filters a.active b { background: rgba(255, 255, 255, 0.25); color: #fff; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin-tile {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 14px 16px 18px;
  overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; color: #1e293b; text-decoration: none;
  box-shadow: 0 3px 0 #dbe2ee;
}
.admin-tile i { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; background: #eef2ff; color: #4d6290; font-size: 18px; }
.admin-tile span { font-weight: 700; color: #475569; }
.admin-tile b { font-size: 26px; line-height: 1; }
.admin-tile em { position: absolute; left: 0; bottom: 0; width: var(--w); height: 5px; background: #4d6290; }
.admin-tile:hover { transform: translateY(-2px); }
.admin-sub { margin: 18px 0 8px; color: #174a43; font-size: 18px; }
.admin-card .admin-tiles, .admin-card .admin-filters { margin-right: 24px; margin-left: 24px; }
.admin-card .admin-sub { margin-left: 24px; }

/* Profiles (administrator): a 3D table of every profile, and the dialog adding or changing one. */
.acc-card h2 .acc-add { margin-left: auto; border: 0; cursor: pointer; font: inherit; font-size: 16px; }
.acc-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 24px 14px; }
.acc-sum {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 12px; font-weight: 800;
  background: var(--soft); color: var(--c); box-shadow: 0 3px 0 var(--edge);
}
.acc-sum b { padding: 0 9px; border-radius: 999px; background: var(--c); color: #fff; }
.role-administrator { --c: #7c3aed; --soft: #f5f3ff; --edge: #ddd6fe; }
.role-underwriter { --c: #0f766e; --soft: #f0fdfa; --edge: #99f6e4; }
.role-employee { --c: #1d4ed8; --soft: #eff6ff; --edge: #bfdbfe; }
.acc-role {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-weight: 800;
  background: var(--soft); color: var(--c); box-shadow: inset 0 -2px 0 var(--edge); white-space: nowrap;
}
.acc-on { color: #16a34a !important; font-weight: 700; }
.acc-off { color: #dc2626 !important; font-weight: 700; }
.acc-avatar { position: relative; overflow: visible; }
.acc-avatar img { border-radius: 50%; }
.acc-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%;
  background: #22c55e; }
/* The 3D table: raised header, each row a slab lifted off the page. */
.acc-table { border-collapse: separate; border-spacing: 0 9px; }
.acc-table thead th {
  background: linear-gradient(180deg, #5e74a6 0%, #3f5384 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 0 #2d3c63, 0 10px 16px -6px rgba(15, 23, 42, 0.5);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.acc-table thead th:first-child { border-radius: 12px 0 0 12px; }
.acc-table thead th:last-child { border-radius: 0 12px 12px 0; }
.acc-table tbody tr.acc-row td {
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); border-top: 1px solid #e6ebf3; border-bottom: 0;
  box-shadow: 0 4px 0 #d3dbe8, 0 12px 18px -10px rgba(15, 23, 42, 0.45);
  vertical-align: middle; transition: transform 0.15s ease;
}
.acc-table tbody tr.acc-row td:first-child { border-radius: 12px 0 0 12px; border-left: 1px solid #e6ebf3; }
.acc-table tbody tr.acc-row td:last-child { border-radius: 0 12px 12px 0; border-right: 1px solid #e6ebf3; }
.acc-table tbody tr.acc-row:hover td { transform: translateY(-2px); background: #fff; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 10px; color: #fff;
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.acc-act.edit { background: linear-gradient(180deg, #4f7be8, #2f5bc9); box-shadow: 0 3px 0 #1f3f94; }
.acc-act.block { background: linear-gradient(180deg, #ef5b5b, #c73232); box-shadow: 0 3px 0 #8f1d1d; }
.acc-act.unblock { background: linear-gradient(180deg, #2cc46d, #128a46); box-shadow: 0 3px 0 #0e6d37; }
.acc-act:active { transform: translateY(2px); box-shadow: none; }
/* The dialog: one field under another, in four groups. */
.acc-modal { width: min(560px, calc(100vw - 24px)); }
.acc-body { max-height: min(70vh, 720px); overflow-y: auto; }
.acc-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.acc-photo-view {
  display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; overflow: hidden;
  border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; font-size: 30px;
  box-shadow: 0 0 0 4px #eef2ff, 0 8px 14px -6px rgba(15, 23, 42, 0.5);
}
.acc-photo-view img { width: 100%; height: 100%; object-fit: cover; }
.acc-photo-pick {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px dashed #94a3b8; border-radius: 10px;
  color: #334155; font-weight: 700; cursor: pointer;
}
.acc-photo-pick input { display: none; }
.acc-group {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 2px solid #e2e8f0;
  color: #3f5384; font-size: 15px;
}
.acc-group i { color: #7c3aed; }
.acc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.acc-field label { color: #334155; font-size: 14px; font-weight: 700; }
.acc-field label b { color: #dc2626; }
.acc-field input, .acc-field select, .acc-field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #c3cfe8; border-radius: 10px; background: #fff; font: inherit;
  font-size: 15px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.acc-field input:focus, .acc-field select:focus, .acc-field textarea:focus {
  border-color: #6c78ea; outline: none; box-shadow: 0 0 0 3px rgba(108, 120, 234, 0.2);
}
.acc-hint { color: #64748b; font-size: 12.5px; }
.acc-field.has-error input, .acc-field.has-error select, .acc-field.has-error textarea { border-color: #dc2626; }
.acc-field-error, .acc-error { color: #dc2626; font-size: 13px; font-weight: 700; }

/* Profiles: a lower table (smaller rows), the region with the BXO, phones with coloured icons. */
.acc-table { border-spacing: 0 5px; }
.acc-table thead th { padding-top: 9px; padding-bottom: 9px; }
.acc-table tbody tr.acc-row td { padding-top: 5px; padding-bottom: 5px; font-size: 15px; line-height: 1.3;
  box-shadow: 0 3px 0 #d3dbe8, 0 8px 12px -9px rgba(15, 23, 42, 0.45); }
.acc-table .acc-avatar { width: 32px; height: 32px; font-size: 14px; }
.acc-table .acc-role { padding: 2px 9px; font-size: 13.5px; }
.acc-table .cases-sub { margin-top: 1px; font-size: 12px; }
.acc-table .case-menu-button { padding: 5px 10px; font-size: 13.5px; }
.acc-bho { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #1e293b; }
.acc-bho i { color: #0ea5e9; }
.acc-phones { line-height: 1.5; }
.acc-phone { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.acc-phone i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px;
  font-size: 12px; color: #fff; }
.acc-phone.mobile i { background: linear-gradient(180deg, #34d399, #059669); }
.acc-phone.inner i { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.acc-menu .case-menu-list { min-width: 230px; }
.acc-password-who { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: #f5f3ff; color: #5b21b6; }
.acc-done { color: #15803d; font-weight: 800; }

/* The profile dialog: dark blue (no green), fields with icons, the groups as cards. */
.acc-modal { width: min(620px, calc(100vw - 24px)); border-radius: 18px; overflow: hidden; }
.acc-modal .credit-modal-head {
  background: linear-gradient(135deg, #46506d 0%, #353d57 55%, #2a3047 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.acc-modal .credit-modal-icon { background: rgba(255, 255, 255, 0.14); color: #fff; }
.acc-modal .credit-modal-close { background: rgba(255, 255, 255, 0.14); color: #fff; }
.acc-modal .credit-save {
  background: linear-gradient(180deg, #46506d 0%, #2f3650 100%); color: #fff; box-shadow: 0 3px 0 #1d2236;
}
.acc-modal .credit-save:hover { filter: brightness(1.12); }
.acc-modal .credit-modal-foot { background: #f6f7fb; border-top: 1px solid #e3e7ef; }
.acc-modal .acc-body { padding: 18px 22px; background: #f6f7fb; }
.acc-note {
  display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 12px; padding: 10px 13px; border-radius: 10px;
  background: #e9ecf5; color: #353d57; font-size: 13.5px; font-weight: 600;
}
.acc-box {
  margin: 0 0 12px; padding: 4px 16px 6px; border: 1px solid #e1e6f0; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 0 #e3e8f1, 0 10px 18px -14px rgba(15, 23, 42, 0.5);
}
.acc-box legend.acc-group {
  float: left; width: 100%; margin: 10px 0 10px; padding: 0 0 7px; border-bottom: 1px solid #edf0f6; color: #353d57;
}
.acc-box legend.acc-group + * { clear: both; }
.acc-group i { color: #46506d; }
.acc-input { position: relative; display: block; }
.acc-input > i {
  position: absolute; top: 50%; left: 12px; color: #6b7593; font-size: 14px; transform: translateY(-50%); pointer-events: none;
}
.acc-input:has(textarea) > i { top: 16px; transform: none; }
.acc-input > i ~ input, .acc-input > i ~ select, .acc-input > i ~ textarea { padding-left: 38px; }
.acc-field input:focus, .acc-field select:focus, .acc-field textarea:focus {
  border-color: #46506d; box-shadow: 0 0 0 3px rgba(70, 80, 109, 0.18);
}
.acc-field select:disabled { background: #eef0f5; color: #475569; }
.acc-photo { padding: 4px 0 8px; }
.acc-photo-view { background: linear-gradient(135deg, #46506d, #2a3047); }
.acc-photo-pick { background: #fff; }
.acc-modal .acc-field label b { color: #dc2626; }

/* Profiles: the role counts in the title's row, the filter under it. */
.acc-card h2 .acc-summary { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 14px; }
.acc-card h2 .acc-sum { border: 0; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.acc-card h2 .acc-sum:hover { transform: translateY(-1px); }
.acc-card h2 .acc-sum.active { outline: 2px solid var(--c); outline-offset: 2px; }
.acc-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 24px 14px; padding: 12px 16px;
  border: 1px solid #e1e6f0; border-radius: 14px; background: #f8fafc; box-shadow: 0 2px 0 #e3e8f1;
}
.acc-filter label { display: flex; flex-direction: column; gap: 5px; min-width: 190px; color: #334155; font-size: 13.5px; font-weight: 800; }
.acc-filter label span i { color: #46506d; }
.acc-filter-name { flex: 1 1 260px; }
.acc-filter input, .acc-filter select {
  height: 40px; padding: 0 12px; border: 1px solid #c3cfe8; border-radius: 10px; background: #fff; font: inherit; font-size: 15px;
}
.acc-filter input:focus, .acc-filter select:focus { border-color: #46506d; outline: none; box-shadow: 0 0 0 3px rgba(70, 80, 109, 0.18); }
.acc-filter .acc-filter-clear { height: 40px; }
.acc-found { margin: 0 0 10px; color: #46506d; font-weight: 800; }
.acc-card h2 .acc-summary { flex: none; width: auto; height: auto; flex-wrap: nowrap; padding: 0; background: none; font-size: inherit; }
.acc-card h2 .acc-sum { white-space: nowrap; }

/* The profiles' filter on the page's blue-grey, the name field narrower, a Filter button. */
.acc-card .acc-filter { border: 0; background: #66739a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 #4d5878; }
.acc-card .acc-filter label { color: #fff; }
.acc-card .acc-filter label span i { color: #dfe5f5; }
.acc-card .acc-filter .acc-filter-name { flex: 0 1 320px; min-width: 220px; }
.acc-card .acc-filter input, .acc-card .acc-filter select { border-color: #8590b3; }
.acc-card .acc-filter input:focus, .acc-card .acc-filter select:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.acc-card .acc-filter .acc-filter-apply { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; }
.acc-card .acc-found { color: #fff; }

/* Underwriters (administrator): the dates, the counts, the clock and the projects' times. */
.uw-filter .uw-dates { min-width: 300px; }
.uw-date-pair { display: flex; align-items: center; gap: 6px; }
.uw-date-pair b { color: #fff; }
.uw-date-pair input { width: 150px; }
.uw-table td.admin-num { text-align: center; }
.uw-num { display: inline-block; min-width: 40px; padding: 3px 10px; border-radius: 10px; font-size: 16px; }
.uw-num.all { background: #e9ecf5; color: #353d57; }
.uw-num.approved { background: #dcfce7; color: #15803d; }
.uw-num.rejected { background: #fee2e2; color: #b91c1c; }
.uw-num.progress { background: #fef3c7; color: #b45309; }
.uw-clock {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 0; border-radius: 12px; background: linear-gradient(180deg, #46506d, #2f3650); color: #fff; font-size: 18px;
  box-shadow: 0 3px 0 #1d2236; cursor: pointer;
}
.uw-clock i + i {
  position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; padding-top: 3px; border: 2px solid #fff;
  border-radius: 50%; background: #f59e0b; font-size: 10px;
}
.uw-clock:hover { filter: brightness(1.15); }
.uw-clock:active { transform: translateY(2px); box-shadow: none; }
.uw-view { text-decoration: none; }
.uw-time-modal { width: min(760px, calc(100vw - 24px)); }
.uw-time-body { max-height: min(72vh, 760px); }
.uw-time-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.uw-time-sum span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: #fff;
  color: #353d57; font-weight: 700; box-shadow: 0 2px 0 #e3e8f1; }
.uw-time-sum b { padding: 0 8px; border-radius: 999px; background: #46506d; color: #fff; }
.uw-project { margin-bottom: 12px; padding: 12px 16px; border: 1px solid #e1e6f0; border-radius: 14px; background: #fff;
  box-shadow: 0 2px 0 #e3e8f1, 0 10px 18px -14px rgba(15, 23, 42, 0.5); }
.uw-project header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.uw-project-name b { display: block; color: #0f172a; font-size: 16px; }
.uw-project-name small { color: #64748b; }
.uw-durations { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.uw-durations span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; }
.uw-durations .review { background: #dcfce7; color: #15803d; }
.uw-durations .waiting { background: #fef3c7; color: #b45309; }
.uw-durations .total { background: #e9ecf5; color: #353d57; }
.uw-steps { position: relative; margin: 10px 0 0; padding: 0 0 0 4px; list-style: none; }
.uw-steps::before { position: absolute; top: 6px; bottom: 6px; left: 132px; width: 2px; background: #e1e6f0; content: ""; }
.uw-steps li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 26px; padding: 6px 0; }
.uw-steps li::before {
  position: absolute; top: 10px; left: 123px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%;
  background: var(--dot, #46506d); box-shadow: 0 0 0 2px var(--dot, #46506d); content: "";
}
.uw-steps time { color: #64748b; font-size: 13px; text-align: right; }
.uw-steps time b { display: block; color: #0f172a; font-size: 15px; }
.uw-steps li span b { display: block; color: #0f172a; }
.uw-steps li span small { color: #64748b; }
.uw-steps li span em { display: block; margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--dot, #46506d);
  border-radius: 6px; background: #f8fafc; color: #334155; font-style: normal; }
.uw-steps .step-sent_admin { --dot: #7c3aed; }
.uw-steps .step-sent_underwriter { --dot: #0f766e; }
.uw-steps .step-rework { --dot: #f59e0b; }
.uw-steps .step-approved { --dot: #16a34a; }
.uw-steps .step-rejected { --dot: #dc2626; }
.uw-time-none { padding: 20px; color: #64748b; text-align: center; }
.admin-only { display: flex; align-items: center; gap: 8px; margin: 0 24px 12px; padding: 9px 14px; border-radius: 10px;
  background: #e9ecf5; color: #353d57; }
.admin-only a { margin-left: auto; color: #b91c1c; font-weight: 700; text-decoration: none; }
.uw-table td.cases-actions { min-width: 128px; }
.uw-table .uw-view { white-space: nowrap; }
.uw-filter .acc-filter-name { flex: 0 1 230px; min-width: 180px; }
.uw-filter label { min-width: 150px; }
.uw-filter .uw-dates { min-width: 0; }
.uw-date-pair input { width: 140px; }
.uw-steps::before { left: 124px; }
.uw-steps li { grid-template-columns: 106px 1fr; gap: 32px; }
.uw-steps li::before { left: 117px; }
.uw-table td.cases-actions a.uw-view { display: inline-flex; place-items: initial; align-items: center; gap: 7px; width: auto; height: auto; padding: 7px 13px; }
.acc-card .uw-filter .acc-filter-name { flex: 0 1 230px; min-width: 180px; }
.acc-card .uw-filter label { min-width: 140px; }
.acc-card .uw-filter .uw-dates { min-width: 0; }
.uw-steps li > span { padding-left: 8px; }

/* The sign-in page while a profile is open: a note that another login opens beside it. */
.login-open-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 10px 12px;
  border-radius: 10px; background: #e9ecf5; color: #353d57; font-size: 14px; line-height: 1.45; }
.login-open-note a { color: #1d4ed8; font-weight: 800; }
/* Profiles: a row stands out on hover without moving (a moved row would carry its menu away). */
.acc-table tbody tr.acc-row:hover td { transform: none; background: #fff; box-shadow: 0 3px 0 #b9c4da, 0 10px 16px -9px rgba(15, 23, 42, 0.55); }
.acc-menu-list { z-index: 60; }

/* Projects (administrator): the statuses in the title's row, the action menu, the "view" dialog. */
.prj-card h2 { flex-wrap: wrap; row-gap: 8px; }
.prj-card h2 .prj-statuses { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 12px; }
.prj-card h2 .prj-statuses a { padding: 5px 11px; font-size: 13.5px; }
.prj-card h2 .prj-statuses a b { font-size: 12.5px; }
.prj-table td.cases-actions { min-width: 120px; }
.prj-view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.prj-view-head b { display: block; color: #0f172a; font-size: 18px; }
.prj-view-head small { color: #64748b; }
.prj-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; }
.prj-facts div { padding: 8px 12px; border: 1px solid #e1e6f0; border-left: 3px solid #46506d; border-radius: 10px; background: #fff; }
.prj-facts dt { color: #64748b; font-size: 12.5px; font-weight: 700; }
.prj-facts dd { margin: 2px 0 0; color: #0f172a; font-weight: 700; }
.prj-facts dd small { display: block; color: #64748b; font-weight: 500; }
#prj-assign-dialog .acc-input select { padding-left: 38px; }
#prj-return-dialog textarea { resize: vertical; }

/* Projects: a greyed action still answers a click with why it is not possible now. */
.prj-why-text { margin: 0; color: #334155; font-size: 15px; line-height: 1.55; }
.acc-menu-list button.case-menu-off { color: #94a3b8; cursor: help; }
.acc-menu-list button.case-menu-off:hover { background: #f8fafc; }

/* Administrator's reports: three cards; the dialog with the format and the period. */
.rep-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; padding: 18px 24px 22px; }
.rep-kind {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; padding: 18px; border: 0;
  border-top: 5px solid var(--c); border-radius: 16px; background: #fff; color: #1e293b; font: inherit; text-align: left;
  cursor: pointer; box-shadow: 0 3px 0 #d3dbe8, 0 14px 22px -14px rgba(15, 23, 42, 0.5); transition: transform 0.15s ease;
}
.rep-kind:hover { transform: translateY(-3px); }
.rep-kind > i { grid-row: span 3; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 22px; }
.rep-kind b { font-size: 17px; }
.rep-kind span { color: #475569; font-size: 14px; line-height: 1.45; }
.rep-kind em { color: var(--c); font-size: 13px; font-style: normal; font-weight: 800; }
.rep-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rep-format {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px;
  border: 2px solid #e1e6f0; border-radius: 14px; background: #fff; cursor: pointer;
}
.rep-format input { position: absolute; opacity: 0; pointer-events: none; }
.rep-format i { grid-row: span 2; color: var(--c); font-size: 30px; }
.rep-format b { font-size: 16px; }
.rep-format span { color: #64748b; font-size: 12.5px; }
.rep-format:has(input:checked) { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.rep-period { margin-top: 6px; }
.rep-dates input { flex: 1; height: 40px; padding: 0 12px; border: 1px solid #c3cfe8; border-radius: 10px; font: inherit; }
.rep-dates b { color: #475569; }
/* The administrator's report dialog: the period under the formats. */
#rep-dialog .rep-period { margin-top: 14px; }
#rep-dialog .rep-dates input { height: 42px; }

/* The text in tables as the user set it (Settings): every cell and the fields typed in it, on the
   screen only. Headings, buttons, menus and chips keep their own. */
@media screen {
  body.tbl-size td,
  body.tbl-size tbody th,
  body.tbl-size :is(td, tbody th) :is(input, textarea, select, output),
  body.tbl-size .info-field > label,
  body.tbl-size .info-field :is(.inn-tools label, .phones-head label),
  body.tbl-size .info-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select) { font-size: var(--tbl-size) !important; }
  body.tbl-size td :is(strong, b, span:not([class]), a:not([class])) { font-size: inherit; }
  body.tbl-bold td,
  body.tbl-bold tbody th,
  body.tbl-bold :is(td, tbody th) :is(input, textarea, select, output, span:not([class]), a:not([class])),
  body.tbl-bold .info-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select) { font-weight: 700 !important; }
}
/* Settings: the section with the sizes, bold, the sample and its own Save. */
.settings-table-text { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #d5dce6; }
.settings-tbl-hint { margin: 0 0 10px; color: #64748b; font-size: 13px; line-height: 1.45; }
.settings-tbl-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.settings-tbl-steps button {
  padding: 6px 12px; border: 1px solid #c3cfe8; border-radius: 999px; background: #fff; color: #334155;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.settings-tbl-steps button.active { border-color: #46506d; background: #46506d; color: #fff; }
.settings-tbl-range { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #334155; font-size: 13.5px; font-weight: 700; }
.settings-tbl-range input { flex: 1; accent-color: #46506d; }
.settings-tbl-range output { min-width: 48px; text-align: right; }
.settings-tbl-bold { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer; }
.settings-tbl-sample { width: 100%; margin-bottom: 10px; border-collapse: collapse; font-size: var(--tbl-sample-size, 15px); }
.settings-tbl-sample th { padding: 6px 8px; background: #4d6290; color: #fff; font-size: 13px; text-align: left; }
.settings-tbl-sample td { padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-size: var(--tbl-sample-size, 15px) !important; }
.settings-tbl-sample td input { width: 100%; padding: 4px 6px; border: 1px solid #c3cfe8; border-radius: 6px; font: inherit;
  font-size: var(--tbl-sample-size, 15px) !important; }
.settings-tbl-sample td.num, .settings-tbl-sample td.num input { text-align: right; }
.settings-tbl-sample.bold td, .settings-tbl-sample.bold td input { font-weight: 700 !important; }
.settings-tbl-actions { display: flex; justify-content: flex-end; gap: 8px; }
.settings-tbl-actions button { height: 38px; padding: 0 14px; font-size: 14px; }
/* The sample shows the choice being tried, whatever is saved for the page. */
body .settings-tbl-sample td,
body .settings-tbl-sample td input { font-size: var(--tbl-sample-size, 15px) !important; }
body .settings-tbl-sample:not(.bold) td,
body .settings-tbl-sample:not(.bold) td input { font-weight: 400 !important; }
.settings-tbl-bold { white-space: nowrap; }
.settings-table-text .settings-tbl-bold input[type="checkbox"] { flex: none; width: 18px; height: 18px; min-width: 0; margin: 0; padding: 0; box-shadow: none; accent-color: #46506d; }
/* Larger table text: fixed-width tables grow with it (scrolling sideways), so no figure is cut. */
@media screen {
  body.tbl-size .asset-table.memo-table { min-width: calc(var(--tbl-size) * 82); }
  body.tbl-size .asset-table.memo-table input.money { font-size: var(--tbl-size) !important; }
  body.tbl-size thead :is(input, select) { font-size: 14px !important; font-weight: 400 !important; }
  body.tbl-size .schedule-side .schedule-rates { table-layout: auto; }
}

/* The underwriter's header: its own colour on the role chip. */
.admin-role-chip.role-underwriter { background: #f0fdfa; color: #0f766e; }
/* The page left open too long: the message and the way back, as a sign-in window. */
.desk-page .csrf-hint { margin: 10px 0 14px; color: #475569; line-height: 1.5; }
.desk-actions .desk-button {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 10px 18px; border-radius: 10px;
  background: linear-gradient(180deg, #6d82ad, #4d6290); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 3px 0 #33436b;
}

/* The underwriter's remarks on a case's pages, and their counts on the tabs. */
.tab-remarks { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: #f59e0b; color: #fff; font-size: 12px; }
.rv-fix { display: inline-flex; align-items: center; gap: 6px; color: #15803d; font-weight: 800; cursor: pointer; white-space: nowrap; }
.rv-fix input { width: 18px; height: 18px; accent-color: #16a34a; }
.rv-fixed-mark { color: #15803d; font-weight: 800; white-space: nowrap; }
.rv-error { margin: 6px 0 0; color: #b91c1c; font-weight: 700; }

/* The underwriter's decisions: a wide dialog for passing a case, the tables of its terms. */
.rv-modal.rv-wide { width: min(1180px, calc(100vw - 24px)); }
.rv-modal .acc-body { max-height: min(76vh, 860px); }
.rv-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.rv-table th { padding: 7px 8px; background: #46506d; color: #fff; font-size: 13px; text-align: left; white-space: nowrap; }
.rv-table td { padding: 5px 4px; border-bottom: 1px solid #e2e8f0; background: #fff; }
.rv-table td.rv-n { width: 32px; text-align: center; font-weight: 800; color: #475569; }
.rv-table input, .rv-table select { width: 100%; min-width: 80px; padding: 7px 8px; border: 1px solid #c3cfe8; border-radius: 8px;
  font: inherit; font-size: 14.5px; }
.rv-table input[readonly] { background: #f1f5f9; color: #475569; }
.rv-add-row { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px dashed #94a3b8; border-radius: 9px;
  background: #fff; color: #334155; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rv-coverage { text-align: right; color: #15803d; font-weight: 800; }
.rv-conditions { margin: 0 0 8px; padding-left: 22px; }
.rv-conditions li { margin-bottom: 6px; }
.rv-conditions li { display: list-item; }
.rv-conditions li input { width: calc(100% - 44px); padding: 8px 10px; border: 1px solid #c3cfe8; border-radius: 8px; font: inherit; }
.rv-remove { width: 34px; height: 34px; margin-left: 6px; border: 0; border-radius: 8px; background: #fee2e2; color: #b91c1c; cursor: pointer; }
.rv-modal textarea { width: 100%; padding: 9px 11px; border: 1px solid #c3cfe8; border-radius: 10px; font: inherit; resize: vertical; }
.rv-req { color: #dc2626; }
.rv-password { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #eef2ff; }
.rv-auto-remarks { margin: 0 0 10px; padding-left: 18px; }
.rv-auto-remarks li { margin-bottom: 5px; }
.rv-none-yet { color: #64748b; }
.rv-warning { padding: 10px 12px; border-radius: 10px; background: #fee2e2; color: #991b1b; font-weight: 700; }
.rv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv-modal .credit-save.rv-warn { background: linear-gradient(180deg, #fbbf24, #d97706); box-shadow: 0 3px 0 #92400e; }
.rv-modal .credit-save.rv-danger { background: linear-gradient(180deg, #ef4444, #b91c1c); box-shadow: 0 3px 0 #7f1d1d; }
.rv-modal .credit-save.rv-go { background: linear-gradient(180deg, #2cc46d, #128a46); box-shadow: 0 3px 0 #0e6d37; }
.rv-terms-error { display: block; margin-top: 6px; }
/* A decision's details under its step of the route. */
.rt-details { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13.5px; }
.rt-details b { display: block; margin-top: 4px; color: #353d57; }
.rt-details ul { margin: 2px 0 4px; padding-left: 18px; }
.rt-details small { display: block; color: #64748b; }
.rt-decision { margin: 0; color: #991b1b; font-weight: 800; }

/* The decision dialogs keep their own compact size whatever the table text size chosen. */
body.tbl-size .rv-modal .rv-table td,
body.tbl-size .rv-modal .rv-table td :is(input, select) { font-size: 14.5px !important; font-weight: 400 !important; }
body.tbl-size .rv-modal .rv-table td:is(.rv-n, .rv-coverage) { font-weight: 800 !important; }
#rv-credits td:nth-child(2) { width: 19%; }
#rv-credits td:nth-child(3) { width: 15%; }
#rv-credits td:nth-child(4) { width: 8%; }
#rv-credits td:is(:nth-child(5), :nth-child(6), :nth-child(7)) { width: 9%; }

/* The underwriter's remarks on the fields and cells themselves: a mark in the corner, a bubble. */
.rv-rel { position: relative; }
.rv-spot.rv-spot-open { box-shadow: inset 0 0 0 2px #f59e0b; background-color: #fffbeb !important; }
.rv-spot.rv-spot-done { box-shadow: inset 0 0 0 2px #86efac; }
.rv-spot.rv-target { box-shadow: inset 0 0 0 3px #2563eb; }
.rv-target:not(.rv-spot) { outline: 3px solid #2563eb; outline-offset: -3px; }
.rv-pin { position: absolute; top: 3px; right: 3px; z-index: 6; display: inline-grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border: 2px solid #fff; border-radius: 50% 50% 50% 4px; background: #f59e0b; color: #fff; font-size: 11px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(15, 23, 42, .3); animation: rv-pop .25s ease-out; }
.rv-spot-done > .rv-pin { background: #16a34a; }
:is(td, th).rv-spot { padding-right: 32px !important; }
.rv-pin:hover { transform: scale(1.15); }
.rv-pin[data-count]::after, .rv-page-pin[data-count]::after { content: attr(data-count); position: absolute; top: -8px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: #b91c1c; color: #fff; font-size: 10px;
  font-weight: 800; line-height: 16px; }
@keyframes rv-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rv-page-pin { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 54px; height: 54px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #fbbf24, #d97706); color: #fff; font-size: 21px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(146, 64, 14, .4); }
.rv-page-pin.rv-all-done { background: linear-gradient(180deg, #34d399, #16a34a); box-shadow: 0 6px 18px rgba(21, 128, 61, .35); }
.rv-page-pin[hidden] { display: none; }
.rv-bubble { position: absolute; z-index: 1000; width: min(400px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto;
  border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 14px 38px rgba(15, 23, 42, .28);
  font-size: 15px; font-weight: 400; font-style: normal; text-align: left; animation: rv-pop .15s ease-out; }
.rv-bubble-head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: linear-gradient(180deg, #46506d, #353d57); color: #fff; }
.rv-bubble-head b { flex: 1; font-size: 14px; }
.rv-bubble-close { width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; }
.rv-thread { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #f1f5f9; }
.rv-thread:empty { display: none; }
.rv-thread-spot { color: #475569; font-size: 12.5px; font-weight: 800; }
.rv-thread-item { display: flex; flex-direction: column; gap: 6px; }
.rv-msg { position: relative; max-width: 88%; padding: 8px 12px 6px; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.rv-msg-uw { align-self: flex-start; border-bottom-left-radius: 4px; background: #fef3c7; }
.rv-msg-uw.fixed { background: #dcfce7; }
.rv-msg-emp { align-self: flex-end; border-bottom-right-radius: 4px; background: #dbeafe; }
.rv-msg-text { margin: 0; color: #1e293b; white-space: pre-line; overflow-wrap: anywhere; }
.rv-msg-meta { display: block; margin-top: 3px; color: #64748b; font-size: 11.5px; }
.rv-msg-delete { position: absolute; top: 4px; right: -34px; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: #fee2e2; color: #b91c1c; cursor: pointer; }
.rv-reply, .rv-new { display: flex; flex-direction: column; gap: 8px; }
.rv-new { padding: 12px; }
.rv-bubble textarea { width: 100%; padding: 8px 10px; border: 1px solid #c3cfe8; border-radius: 10px; font: inherit; font-size: 14.5px; resize: vertical; }
.rv-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-bubble .rv-save { align-self: flex-end; height: 38px; white-space: nowrap; }
.rv-hint { margin-left: 8px; color: #92400e; font-style: normal; font-weight: 700; }
@media print { .rv-pin, .rv-page-pin, .rv-bubble { display: none !important; } }

/* Open remarks stand out at once: the cell red inside, a big message mark, a large bubble. */
.rv-spot.rv-spot-open { box-shadow: inset 0 0 0 3px #dc2626; background: #fee2e2 !important; }
.rv-spot.rv-spot-open :is(input:not([type=checkbox]):not([type=radio]), textarea, select, output) { background: #fecaca !important;
  color: #7f1d1d !important; border-color: #f87171 !important; }
.rv-spot.rv-spot-done { background: #f0fdf4 !important; }
.rv-spot-open > .rv-pin { background: #dc2626; animation: rv-pop .25s ease-out, rv-pulse 1.8s ease-in-out .3s infinite; }
.rv-pin { top: 4px; right: 4px; width: 36px; height: 36px; border-width: 3px; font-size: 16px; }
:is(td, th).rv-spot { padding-right: 46px !important; }
.info-field.rv-spot { padding: 6px 46px 6px 8px; border-radius: 10px; }
@keyframes rv-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .55); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } }
.rv-bubble { width: min(620px, calc(100vw - 16px)); max-height: min(80vh, 760px); border-radius: 18px; font-size: 18px; }
.rv-bubble-head { padding: 14px 16px; }
.rv-bubble-head b { font-size: 18px; }
.rv-bubble-close { width: 36px; height: 36px; font-size: 18px; }
.rv-thread { gap: 14px; padding: 16px; }
.rv-msg { padding: 12px 16px 9px; border-radius: 16px; }
.rv-msg-uw:not(.fixed) { background: #fee2e2; border: 1px solid #fca5a5; }
.rv-msg-text { font-size: 18px; line-height: 1.4; }
.rv-msg-meta { font-size: 13.5px; }
.rv-thread-spot { font-size: 15px; }
.rv-new { padding: 16px; }
.rv-bubble textarea { padding: 11px 13px; font-size: 17px; }
.rv-bubble .rv-fix { font-size: 17px; }
.rv-bubble .rv-fix input { width: 22px; height: 22px; }
.rv-bubble .rv-save { height: 46px; padding: 0 22px; font-size: 17px; }
.rv-bubble .rv-fixed-mark { font-size: 16px; }
:is(td, th).rv-spot.rv-spot-open, :is(td, th).rv-spot.rv-spot-open :not(.rv-pin, .rv-pin *, button, button *) { color: #7f1d1d !important;
  text-shadow: none !important; }

/* Info: "Kalkulyatsiya bilan" on a coloured ground, like the page's own. */
.with-calculation { border-color: #4e5b82; background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 #434f72; color: #fff; }
.with-calculation i { color: #bbf7d0; }
.with-calculation input { accent-color: #22c55e; }
.with-calculation:has(input:checked) { border-color: #15803d; background: linear-gradient(180deg, #6b79a2 0%, #4e5b82 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 #15803d; }

/* Info: "Orqaga" and the "Fayl tanlash" buttons on the page's own blue ground. */
.info-actions .info-back { border-color: #4e5b82; background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%); color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #434f72, 0 6px 10px rgba(15, 23, 42, .25); }
.info-actions .info-back:hover { background: linear-gradient(180deg, #7d8bb4 0%, #65739c 100%); }
.info-actions .info-back:active { box-shadow: 0 1px 0 #434f72; }
.doc-button { border-color: #4e5b82; background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%); color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 0 #434f72, 0 5px 8px rgba(15, 23, 42, .22); }
.doc-button i { color: #bbf7d0; }
.doc-picker:hover .doc-button, .doc-picker:focus-within .doc-button { background: linear-gradient(180deg, #7d8bb4 0%, #65739c 100%); }
.doc-picker:active .doc-button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 #434f72, 0 2px 3px rgba(15, 23, 42, .2); }

/* Info: the section numbers and the adding buttons on the page's own blue ground. */
.info-card h2 span { background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%); box-shadow: 0 2px 0 #434f72; }
.related-add, .phones-head button, #inn-fill { border-color: #4e5b82; background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 0 #434f72, 0 6px 10px rgba(15, 23, 42, .2); }
.related-add:hover, .phones-head button:hover, #inn-fill:hover { background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%); }
.related-add:active, .phones-head button:active, #inn-fill:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 #434f72, 0 2px 3px rgba(15, 23, 42, .2); }
.related-add i, .phones-head button i, #inn-fill i { color: #bbf7d0; }

/* "Tahrirlash" and the "Tahrirlash rejimi" badge on the page's own blue ground. */
.sales-button.edit { border-color: #4e5b82; background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%); box-shadow: 0 3px 0 #434f72; color: #fff; }
.sales-button.edit i { color: #bbf7d0; }
.org-bar .case-mode:not(.viewing):not(.new) { border-color: #4e5b82; background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #434f72, 0 6px 12px rgba(67, 79, 114, .25); }
.org-bar .case-mode:not(.viewing):not(.new) i { color: #bbf7d0; }

/* Realizatsiya: the unaccounted goods' rest, a plain amount with its kopecks (no "so'm"). */
#sheet-unaccounted { box-sizing: border-box; width: 100%; min-width: 160px; padding: 6px 10px; border: 1px solid #c3cfe8; border-radius: 8px;
  background: #fff; font: inherit; font-weight: 800; text-align: right; }

/* Kalkulyatsiya: the page stretches the full width; "Bog'liq shaxs" and the costs' header on the page's blue. */
.calc-card { max-width: 1480px; }
.sales-sheet.calc-form .sales-3d.calc-lines thead th { background: linear-gradient(180deg, #7886b0 0%, #65739c 55%, #56648b 100%);
  border-bottom-color: #434f72; }
.calc-related-toggle, .calc-related-toggle:has(input:checked) { border-color: #4e5b82;
  background: linear-gradient(180deg, #7886b0 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #434f72, 0 8px 14px -4px rgba(67, 79, 114, .4); }
.calc-related-toggle input { accent-color: #22c55e; }
.calc-related-toggle i { color: #bbf7d0; }
.org-bar .case-mode.new { border-color: #4e5b82; background: linear-gradient(180deg, #7886b0 0%, #5a6890 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #434f72, 0 6px 12px rgba(67, 79, 114, .25); }
.org-bar .case-mode.new i { color: #bbf7d0; }

/* Grafik: the terms' names, the monthly payment's head and the total line on the page's blue, raised. */
table.schedule-params tbody th,
table.schedule-rates thead th,
table.schedule-table tfoot th {
  border-color: #4e5b82;
  background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .18) !important;
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
table.schedule-params tbody th { border-bottom: 1px solid #434f72; border-right: 1px solid #434f72; }
table.schedule-params tbody th * { color: #fff !important; }
table.schedule-table tfoot th { border-top: 3px solid #434f72; }

/* Grafik: the issue date line keeps its green when the pointer is over it. */
.schedule-table.cases-table tbody tr.schedule-start:hover > td {
  background: linear-gradient(180deg, #2cc46d 0%, #17a755 55%, #128a46 100%);
  color: #ffffff;
}

/* Cash Flow: the company's name and "Saqlash" on the page's blue, raised. */
.cf-company { border-color: #4e5b82; background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .15), 0 4px 0 #434f72,
    0 14px 24px -8px rgba(67, 79, 114, .45); }
.cf-card .sales-button.save { border-color: #4e5b82; background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #434f72; color: #fff; }
.cf-card .sales-button.save i { color: #bbf7d0; }

/* Aktiv: each group's total on the page's blue, raised. */
.asset-head th.asset-total { background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .18); color: #fff; }

/* Aktiv: "Saqlash" on the page's blue, raised. */
#debt-save, #asset-save { border-color: #4e5b82; background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #434f72; color: #fff; }
#debt-save i, #asset-save i { color: #bbf7d0; }
#debt-save:disabled, #asset-save:disabled { opacity: .6; }

/* Balans: the groups' sums, the totals line and "Saqlash" on the page's blue, raised. */
.bal-value.group, .bal-total th, .bal-total td { background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .18); color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); }
.bal-card .sales-button.save { border-color: #4e5b82; background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #434f72; color: #fff; }
.bal-card .sales-button.save i { color: #bbf7d0; }
.bal-card .sales-button.save:disabled { opacity: .6; }

/* Balans: "3 oygacha" / "3 oydan yuqori" in plain black text. */
.bal-label.red { color: #111827; }

/* Balans: every plain cell raised (3D) on its own colour — a light top, a darker base. */
.bal-card .bal-table tbody tr:not(.bal-total):not(.bal-gap) > :is(th, td):not(.group) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%, rgba(15, 23, 42, .06) 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(15, 23, 42, .12), inset 1px 0 0 rgba(255, 255, 255, .7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
}

/* Balans Taqsimot: the whole text shows in its cell, which grows downwards as the text needs. */
.bal-dist-table textarea.bal-expand { field-sizing: content; height: auto; min-height: 46px; max-height: none;
  overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Balans: the figures' cells (taken from other pages, the extra lines, the ratios) on white. */
.bal-card .bal-table .bal-value.auto, .bal-card .bal-table .bal-extra td, .bal-card .bal-table .bal-ratio td,
.bal-card .bal-table .bal-rate td, .bal-card .bal-table .bal-value.typed { background-color: #ffffff; }

/* Memorandum: larger text in the head row and on the section bands (e.g. "Cash Flow"). */
.asset-table.memo-table thead th { font-size: 21px !important; padding: 12px 8px; }
body .asset-table.memo-table thead input.memo-date { font-size: 18px !important; font-weight: 700 !important; padding: 4px 8px; }
.asset-table.memo-table .memo-section th { font-size: 22px !important; padding: 11px 14px !important; }

/* Cash Flow: the season % and the weakest month in bold. */
.cf-form input[name="season"], .cf-form input[name="season"] + span, .cf-form select[name="low_month"] { font-weight: 800 !important; }

/* Realizatsiya (and alokador) sheet: "Qo'shish" and "Saqlash" on the page's blue, raised. */
#sales-sheet #trade-open, #sales-sheet #sales-save { border-color: #4e5b82;
  background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #434f72, 0 6px 12px rgba(67, 79, 114, .25); color: #fff; }
#sales-sheet #trade-open i, #sales-sheet #sales-save i { color: #bbf7d0; }

/* Cash Flow: each activity's seasonality and weakest month, bold, the % clear of the figure. */
.cf-row-season .credit-unit { position: relative; }
.cf-row-season .credit-unit input { box-sizing: border-box; width: 100%; min-width: 96px; padding-right: 30px !important;
  text-align: right; font-weight: 800 !important; }
.cf-row-season .credit-unit span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-weight: 800; }
.cf-row-season select { font-weight: 800 !important; }
.cf-row-season [data-cf-season-total] { font-weight: 900; }

/* Info: the collateral's "Jami" line. */
.collaterals-table tfoot .collaterals-total > * { border-top: 2px solid #4e5b82; background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .15); color: #fff; font-weight: 900;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); }
.collaterals-table tfoot .collaterals-total th { text-align: left; }
.collaterals-table tfoot[hidden] { display: none; }
.collaterals-table tfoot .collaterals-total th { font-size: 19px; }
.collaterals-table tfoot .collaterals-total > * { font-size: 19px; }

/* Info: the credits' and the collateral's tables drawn as a grid (their own colours kept);
   the collateral's "Jami" line plain, in bold. */
.credits-table, .collaterals-table { border-collapse: collapse; border: 1px solid #9aa6bf; }
.credits-table :is(th, td), .collaterals-table :is(th, td) { border: 1px solid #9aa6bf; padding-left: 8px; padding-right: 8px; }
.collaterals-table tfoot .collaterals-total > * { border-top: 2px solid #4e5b82; background: none; box-shadow: none; color: #1f2a44;
  text-shadow: none; font-weight: 900; }
.credits-table :is(th, td):first-child, .collaterals-table :is(th, td):first-child { padding-left: 8px; text-align: center; }
/* The last row keeps its bottom line too (other rules drop it). */
.credits-table :is(th, td), .collaterals-table :is(th, td) { border: 1px solid #9aa6bf !important; }
.credits-table, .collaterals-table { outline: 1px solid #9aa6bf; outline-offset: -1px; }

/* Info: the related parties' table as a grid too (its own colours kept). */
.related-parties-table { border-collapse: collapse; outline: 1px solid #9aa6bf; outline-offset: -1px; }
.related-parties-table :is(th, td) { border: 1px solid #9aa6bf !important; padding-left: 8px; padding-right: 8px; }
.related-parties-table :is(th, td):first-child { padding-left: 8px; text-align: center; }

/* Info: the bank accounts' table, a grid like the others; its dialog. */
.accounts-table { border-collapse: collapse; outline: 1px solid #9aa6bf; outline-offset: -1px; }
.accounts-table :is(th, td) { border: 1px solid #9aa6bf !important; padding-left: 8px; padding-right: 8px; }
.accounts-table :is(th, td):first-child { padding-left: 8px; text-align: center; }
.accounts-table .account-badge { margin-left: 6px; vertical-align: middle; }
.accounts-table .account-main-cell { color: #15803d; font-weight: 900; text-align: center; }
.accounts-modal .account-main { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.accounts-modal .account-main input { width: 18px; height: 18px; accent-color: #16a34a; }
.accounts-modal .credit-unit span#accounts-currency { min-width: 44px; font-weight: 800; }
.accounts-table .account-main-cell { color: #475569; font-weight: 700; text-align: left; white-space: nowrap; }
.accounts-table .account-main-cell.primary { color: #15803d; font-weight: 900; }

/* Info: the founders' table as a grid, its totals in its last line. */
.founders-table { border-collapse: collapse; outline: 1px solid #9aa6bf; outline-offset: -1px; }
.founders-table :is(th, td) { border: 1px solid #9aa6bf !important; padding-left: 8px; padding-right: 8px; }
.founders-table :is(th, td):first-child { padding-left: 8px; text-align: center; }
.founders-table tfoot .founders-total > * { border-top: 2px solid #4e5b82 !important; color: #1f2a44; font-size: 19px; font-weight: 900; }
.founders-table tfoot .founders-total th { text-align: left; }
.founders-table tfoot[hidden] { display: none; }
.founders-summary:empty { display: none; }

/* Info tables (accounts, credits, collateral, related parties, founders): the head row larger,
   centred in its cells, in black. */
:is(.accounts-table, .credits-table, .collaterals-table, .related-parties-table, .founders-table) thead th {
  color: #000 !important; font-size: 16px !important; font-weight: 800; text-align: center !important;
  vertical-align: middle; white-space: normal; line-height: 1.3;
}

/* Sign-in page: the note that the profile was signed in elsewhere. */
.login-ended-note { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; border: 1px solid #fcd34d;
  border-left: 4px solid #d97706; border-radius: 10px; background: #fffbeb; color: #78350f; font-size: 13px; line-height: 1.4; }
.login-ended-note i { margin-top: 2px; color: #d97706; }
.login-ended-note small { color: #92400e; white-space: nowrap; }

/* The program's creator: a round badge between the languages and the profile — a turning
   coloured ring, a dark core with a quill, a small light that breathes. */
.creator-orb { position: relative; display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px;
  margin: 0 10px 0 4px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: transform .2s ease; }
.creator-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #f472b6, #f59e0b, #facc15, #34d399, #38bdf8, #a78bfa, #f472b6);
  animation: creator-turn 6s linear infinite; box-shadow: 0 0 14px rgba(167, 139, 250, .55); }
.creator-core { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #313b58, #0e1320 70%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), inset 0 -3px 6px rgba(0, 0, 0, .45); }
.creator-core i { font-size: 17px; background: linear-gradient(135deg, #fde68a, #f472b6 45%, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent; transform: rotate(-8deg); }
.creator-dot { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border: 2px solid #1b2232;
  border-radius: 50%; background: #34d399; animation: creator-breathe 2.2s ease-in-out infinite; }
.creator-orb:hover { transform: translateY(-2px) scale(1.07); }
.creator-orb:hover .creator-ring { animation-duration: 2s; }
.creator-orb:focus-visible { outline: 2px solid #a5f3fc; outline-offset: 3px; }
.creator-avatar { background: conic-gradient(from 0deg, #f472b6, #f59e0b, #34d399, #38bdf8, #a78bfa, #f472b6) !important; }
.creator-message { inset: auto; }
.creator-message::before { left: var(--arrow, 22px); }
@keyframes creator-turn { to { transform: rotate(360deg); } }
@keyframes creator-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .creator-ring, .creator-dot { animation: none; } }
.creator-orb { width: 42px; height: 42px; margin: 0 6px 0 2px; }
.creator-core { width: 33px; height: 33px; }

/* Top bar: "Kalkulyator" on the page's blue, raised. */
.btn-calculator { border: 1px solid #4e5b82; background: linear-gradient(180deg, #7d8bb4 0%, #65739c 55%, #56648b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #434f72, 0 5px 10px rgba(0, 0, 0, .25); color: #fff; }
.btn-calculator:hover { background: linear-gradient(180deg, #8996be 0%, #6f7da6 55%, #5f6d95 100%); color: #fff; }
.btn-calculator { padding-top: 15px; padding-bottom: 15px; }

/* The creator's message, like a text message: dots while "typing", then the bubble pops in. */
.creator-message { width: min(400px, calc(100vw - 32px)); }
.creator-chat { display: flex; flex-direction: column; gap: 10px; }
.creator-typing { display: inline-flex; align-self: flex-start; gap: 5px; padding: 12px 16px; border-radius: 18px 18px 18px 5px;
  background: #e0e7ff; }
.creator-typing span { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; animation: creator-typing 1s infinite ease-in-out; }
.creator-typing span:nth-child(2) { animation-delay: .15s; }
.creator-typing span:nth-child(3) { animation-delay: .3s; }
.creator-bubble { position: relative; display: none; align-self: flex-start; max-width: 100%; padding: 11px 14px 20px;
  border-radius: 18px 18px 18px 5px; background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
  box-shadow: 0 1px 0 #c7d2fe, 0 6px 14px -8px rgba(30, 27, 75, .45); color: #1e1b4b; font-size: 14.5px; line-height: 1.45; }
.creator-bubble p { margin: 0 0 6px; }
.creator-bubble b { color: #312e81; }
.creator-bubble a { color: #2563eb; font-weight: 800; text-decoration: none; white-space: nowrap; }
.creator-phone { font-size: 14px; }
.creator-time { position: absolute; right: 12px; bottom: 5px; color: #64748b; font-size: 11px; }
.creator-time i { color: #22c55e; font-size: 10px; }
.creator-contacts { display: none; }
.creator-chat.arrived .creator-typing { display: none; }
.creator-chat.arrived .creator-bubble { display: block; animation: creator-pop .28s cubic-bezier(.2, 1.4, .4, 1); }
.creator-chat.arrived .creator-contacts { display: flex; animation: creator-pop .28s .1s both; }
@keyframes creator-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes creator-pop { from { transform: scale(.85) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .creator-typing span, .creator-chat.arrived .creator-bubble { animation: none; } }

/* Room between the languages and the creator's badge; the ScoReo mark under the creator's message. */
.creator-orb { margin-left: 14px; }
.creator-logo { display: none; align-items: center; justify-content: center; gap: 9px; padding-top: 8px;
  border-top: 1px dashed #c7d2fe; }
.creator-logo svg { width: 34px; height: 34px; filter: drop-shadow(0 3px 5px rgba(12, 17, 28, .3)); }
.creator-logo span { color: #0e1320; font: 800 24px/1 "Segoe UI Variable Display", "Segoe UI", Nunito, sans-serif;
  letter-spacing: -.03em; }
.creator-logo i { color: #4f9f86; font-style: normal; }
.creator-logo small { align-self: flex-end; margin-bottom: 2px; color: #64748b; font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; }
.creator-chat.arrived .creator-logo { display: flex; animation: creator-pop .28s .1s both; }

/* The creator's picture: the programmer at the computer, the cursor blinking. */
.creator-avatar { width: 46px !important; height: 46px !important; padding: 0 !important; overflow: hidden;
  background: none !important; box-shadow: 0 3px 0 #4338ca, 0 6px 12px rgba(67, 56, 202, .35); }
.creator-avatar svg { display: block; width: 100%; height: 100%; }
.creator-avatar .coder-caret { animation: coder-caret 1s steps(1) infinite; }
.creator-chat.arrived .creator-bubble, .creator-chat.arrived .creator-logo { animation-duration: .16s; animation-delay: 0s; }
@keyframes coder-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .creator-avatar .coder-caret { animation: none; } }

/* The creator's message: larger text. */
.creator-message { width: min(460px, calc(100vw - 32px)); }
.creator-bubble { font-size: 17.5px; line-height: 1.5; padding: 13px 16px 22px; }
.creator-phone { font-size: 17px; }
.creator-time { font-size: 12px; }

/* The regional manager: its own colour wherever a role is shown. */
.role-panel.role-regional { --role: #7c3aed; --role-soft: #f5f3ff; }
.role-regional { --c: #7c3aed; --soft: #f5f3ff; --edge: #ddd6fe; }
.admin-role-chip.role-regional { background: #f5f3ff; color: #7c3aed; }

/* Profile dialog: the functions to tick and a manager's BXOs, as compact chips in a grid. */
.perm-group, .bho-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 12px;
  margin: 6px 0 12px; }
.perm-group[hidden] { display: none; }
.perm-group-title { grid-column: 1 / -1; margin-top: 4px; color: #1f2a44; font-size: 14px; font-weight: 800; }
.perm-item { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 7px 11px; border: 1px solid #dbe2ef;
  border-radius: 10px; background: #f8fafc; color: #1f2a44; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s; }
.perm-item small { color: #64748b; font-weight: 500; }
.acc-modal .perm-item input[type=checkbox] { flex: none; width: 18px !important; height: 18px !important; min-width: 0;
  margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: #16a34a; }
.perm-item:has(input:checked) { border-color: #86efac; background: #ecfdf5; }
.perm-item:has(input:disabled) { opacity: .55; cursor: default; }
.bho-add { display: flex; gap: 8px; align-items: center; }
.bho-add input { flex: 1; padding: 8px 10px; border: 1px solid #c3cfe8; border-radius: 9px; font: inherit; }
.bho-add .related-add { margin: 0; white-space: nowrap; }
.acc-req { color: #dc2626; }
.acc-warn { margin: 8px 0 0; padding: 8px 12px; border: 1px solid #fcd34d; border-left: 4px solid #d97706; border-radius: 10px;
  background: #fffbeb; color: #78350f; font-size: 14px; }
.acc-warn i { color: #d97706; }
.rg-watch .acc-bho { margin: 0 4px; }