:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  min-height: 100%;
  background: #f4f7fb;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
}

button,
input,
textarea,
select {
  font-size: 16px;
}

button,
.primary-button,
.secondary-button,
.icon-button,
.tab,
.project-chip {
  -webkit-tap-highlight-color: transparent;
}

@media (display-mode: standalone) {
  body {
    user-select: none;
  }

  input,
  textarea {
    user-select: text;
  }
}

@media (max-width: 720px) {
  .setup-screen {
    align-items: start;
    padding: max(14px, var(--safe-top)) max(14px, var(--safe-right)) max(14px, var(--safe-bottom)) max(14px, var(--safe-left));
  }

  .app-shell {
    display: block;
    min-height: 100dvh;
  }

  .sidebar {
    position: static;
    height: auto;
    gap: 10px;
    padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) 12px max(12px, var(--safe-left));
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .sidebar-card {
    display: none;
  }

  .project-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    padding: 0 2px 4px 0;
    scroll-snap-type: x proximity;
  }

  .project-chip {
    min-width: 210px;
    scroll-snap-align: start;
  }

  .workspace {
    padding: 12px max(12px, var(--safe-right)) max(18px, var(--safe-bottom)) max(12px, var(--safe-left));
  }

  .topbar {
    gap: 10px;
    margin-bottom: 12px;
  }

  .topbar h1 {
    font-size: 26px;
  }

  .toolbar,
  .split-actions,
  .invoice-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-inline: calc(max(12px, var(--safe-left)) * -1) calc(max(12px, var(--safe-right)) * -1);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .tab {
    min-width: max-content;
  }

  .panel {
    padding: 12px;
  }

  .panel-heading {
    gap: 10px;
    margin-bottom: 12px;
  }

  .table-wrap {
    border-radius: 7px;
  }

  table {
    min-width: 760px;
  }

  .roomy-table table,
  .material-table table {
    min-width: 920px;
  }

  .total-bar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .total-bar div {
    min-width: 0;
  }

  .print-bottom,
  .print-info,
  .signature-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .summary-strip {
    grid-template-columns: 1fr;
  }

  .topbar h1 {
    font-size: 23px;
  }

  .metric strong {
    font-size: 20px;
  }
}