/* Client cabinet. Mobile-first, built on tokens.css and components.css. */

.cabinet-page main {
  min-height: calc(100dvh - var(--header-h));
}

.cab-section {
  padding-block: var(--s-6) calc(var(--s-10) + max(env(safe-area-inset-bottom), var(--banner-h, 0px)));
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.cab-wrap {
  display: grid;
  gap: var(--s-6);
  min-width: 0;
  overflow-wrap: anywhere;
}

.cab-doc-width {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.cab-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-title);
}

.cab-text {
  margin: 0;
  white-space: pre-line;
}

.cab-card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* Login, signup, reset and notice cards: the lead stays with its title, the form and links get air. */
.cab-card:not(.stack) > * + * {
  margin-top: var(--s-5);
}

.cab-card:not(.stack) > h1 + p {
  margin-top: var(--s-2);
}

/* Forms */

.cab-form {
  display: grid;
  gap: var(--s-5);
}

.cab-form .input,
.cab-form .textarea,
.cab-form .select {
  width: 100%;
  min-height: 44px;
}

.cab-submit {
  width: 100%;
  min-height: 44px;
}

.cab-links {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}

.cab-links a,
.cab-crumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
}

.cab-crumb {
  margin: 0;
}

/* Password field with the visibility toggle (R1) */

.cab-password {
  position: relative;
}

.cab-password .input {
  width: 100%;
  padding-right: 48px;
}

.cab-eye {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transform: translateY(-50%);
}

.cab-eye:hover {
  color: var(--ink);
}

.cab-eye:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.cab-eye-off,
.cab-eye[aria-pressed="true"] .cab-eye-on {
  display: none;
}

.cab-eye[aria-pressed="true"] .cab-eye-off {
  display: contents;
}

/* Navigation: a bottom bar on phones, a row on wider screens */

.cab-nav {
  position: fixed;
  inset: auto 0 var(--banner-h, 0px);
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: max(0px, env(safe-area-inset-bottom) - var(--banner-h, 0px));
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  border-top: 1px solid var(--line);
  background: var(--chrome);
}

.cab-nav-form {
  display: contents;
}

.cab-nav-link {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--s-2) var(--s-1);
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-2xs);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cab-nav-link[aria-current="page"],
.cab-nav-link:hover {
  color: var(--accent-ink);
}

.cab-nav-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.cabinet-page:has(.cab-nav) .cab-section {
  padding-bottom: calc(var(--s-10) + 56px + env(safe-area-inset-bottom));
}

/* A toast rises above the bottom bar instead of covering its links. */
.cabinet-page:has(.cab-nav) .toast-region {
  bottom: calc(var(--banner-h, 0px) + 56px + max(var(--s-4), env(safe-area-inset-bottom)));
}

@media (min-width: 768px) {
  .cab-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: 0;
    border: 0;
    background: none;
  }

  .cab-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 44px;
    padding-inline: var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
  }

  .cab-nav-link[aria-current="page"] {
    background: var(--accent-soft);
  }

  .cab-nav-form .cab-nav-link {
    margin-left: auto;
  }

  .cabinet-page:has(.cab-nav) .cab-section {
    padding-bottom: calc(var(--s-10) + env(safe-area-inset-bottom));
  }

  .cabinet-page:has(.cab-nav) .toast-region {
    bottom: calc(var(--banner-h, 0px) + max(var(--s-6), env(safe-area-inset-bottom)));
  }

  .cab-submit {
    width: auto;
  }
}

/* Sign-in, sign-up and reset on short or narrow screens (320x568, 360x640, phones on their side): tighter
   air so the button is on the first screen above the cookie bar; inputs stay 16px and 44px tall, labels stay above them. */
@media (max-height: 600px), (max-width: 360px) {
  .cabinet-page:not(:has(.cab-nav)) .cab-section {
    padding-top: var(--s-3);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-card {
    padding: var(--s-4);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-card:not(.stack) > :not(h1) + * {
    margin-top: var(--s-4);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-card > h1 {
    font-size: var(--fs-2xl);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-form {
    gap: var(--s-3);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-form .field {
    gap: var(--s-1);
  }
}

/* On their side the fields go two to a row; notices and the button keep the full width. */
@media (max-height: 500px) and (min-width: 600px) {
  .cabinet-page:not(:has(.cab-nav)) .cab-form:has(> .field ~ .field) {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-4);
  }

  .cabinet-page:not(:has(.cab-nav)) .cab-form > :not(.field) {
    grid-column: 1 / -1;
  }
}

/* Lists of projects, orders and documents */

.cab-block {
  display: grid;
  gap: var(--s-3);
}

.cab-block h2,
.cab-block-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
}

.cab-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.cab-list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.cab-item:not(:has(.cab-item-link)),
.cab-item-link {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
}

.cab-item-link {
  min-height: 44px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.cab-item-link:hover {
  background: var(--chrome);
}

.cab-item-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.cab-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin: 0;
}

.cab-item-meta {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.cab-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--chrome-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.cab-badge-active,
.cab-badge-new,
.cab-badge-progress,
.cab-badge-sent,
.cab-badge-pending {
  background: var(--info-soft);
  color: var(--info);
}

.cab-badge-done,
.cab-badge-confirmed,
.cab-badge-accepted,
.cab-badge-signed,
.cab-badge-paid,
.cab-badge-approved {
  background: var(--success-soft);
  color: var(--success);
}

.cab-badge-paused,
.cab-badge-unpaid,
.cab-badge-partial {
  background: var(--warning-soft);
  color: var(--warning);
}

.cab-badge-declined,
.cab-badge-expired,
.cab-badge-overdue,
.cab-badge-cancelled,
.cab-badge-rejected {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Progress */

.cab-progress {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chrome-2);
  overflow: hidden;
  appearance: none;
}

.cab-progress::-webkit-progress-bar {
  background: var(--chrome-2);
}

.cab-progress::-webkit-progress-value {
  background: var(--accent);
}

.cab-progress::-moz-progress-bar {
  background: var(--accent);
}

.cab-progress-lg {
  height: 10px;
}

.cab-percent {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

/* Files */

.cab-file,
.cab-touch {
  min-height: 44px;
  max-width: 100%;
}

.cab-file {
  overflow-wrap: anywhere;
}

/* Thread */

.cab-thread {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab-msg {
  display: grid;
  gap: var(--s-1);
  max-width: min(36rem, 92%);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--chrome);
}

.cab-msg-client {
  justify-self: end;
  background: var(--accent-soft);
}

.cab-msg-meta {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.cab-body {
  margin: 0;
  white-space: pre-line;
}

/* Review */

.cab-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--line-strong);
}

.cab-stars .is-on {
  color: var(--warning);
}

.cab-rating {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.cab-rate {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
}

.cab-rate:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.cab-rate:has(input:focus-visible) {
  box-shadow: var(--ring);
}

.cab-rate input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cab-static {
  margin: 0;
  color: var(--ink-2);
}

/* Printable document */

.cab-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.cab-doc-actions > *,
.cab-doc-actions form .btn {
  flex: 1 1 12rem;
}

.cab-doc {
  display: grid;
  gap: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.cab-doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.cab-doc-kind {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}

.cab-doc-parties,
.cab-doc-facts {
  display: grid;
  gap: var(--s-4);
  margin: 0;
}

.cab-doc-parties h2 {
  margin: 0 0 var(--s-1);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.cab-doc-facts dt {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.cab-doc-facts dd {
  margin: 0;
}

.cab-doc-amount {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
}

.cab-pay-list {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cab-pay-item {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.cab-pay-item h3,
.cab-pay-item p {
  margin: 0;
}

.cab-pay-total {
  font-weight: var(--fw-semibold);
}

.cab-pay-qr {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.cab-pay-qr svg {
  display: block;
  width: 12rem;
  height: auto;
  margin-bottom: var(--s-2);
}

.cab-mono {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.cab-table-wrap {
  overflow-x: auto;
}

.cab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cab-table th,
.cab-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.cab-table td:last-child,
.cab-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .cab-doc-parties,
  .cab-doc-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cab-doc {
    padding: var(--s-8);
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  .site-header,
  .site-footer,
  .cab-nav,
  .cab-noprint,
  .cab-crumb {
    display: none !important;
  }

  .cab-section {
    padding: 0;
  }

  .cab-doc-width {
    width: 100%;
  }

  .cab-doc {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
  }

  .cab-table th,
  .cab-table td {
    border-color: var(--line-strong);
  }

  .cab-table tr {
    break-inside: avoid;
  }
}