/* Page height that behaves on phones (uses --vh set by layout.js) */
.tcc-page {
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
}

/* Generic card styling used across app */
.tcc-card {
  background: #0f172a0d;
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
}

/* ===== Data-entry tab container ===== */
.tcc-tab {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;                 /* Mobile: stack */
}
@media (min-width: 900px) {
  .tcc-tab {
    grid-template-columns: minmax(280px, 420px) 1fr;  /* Desktop: form | table */
    align-items: start;
  }
}

/* Table wrapper: scroll zone on mobile, free on desktop */
.tcc-table-wrap {
  min-height: 240px;                               /* stable first paint */
  max-height: calc(var(--vh, 1vh) * 50);           /* ~half screen on phones */
  overflow: auto;
}
@media (min-width: 900px) {
  .tcc-table-wrap { max-height: none; overflow: visible; }
}

/* Form controls: easier tap targets on mobile */
.tcc-form input,
.tcc-form select,
.tcc-form button,
.tcc-form textarea {
  min-height: 40px;
}

/* Sticky action bar (Commit/Discard) on mobile, normal flow on desktop) */
.tcc-actions {
  position: sticky;
  bottom: 0;
  background: #0b1220f2;
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  z-index: 20;
  border-top: 1px solid #1f2937;
}
@media (min-width: 900px) {
  .tcc-actions {
    position: static;
    background: transparent;
    backdrop-filter: none;
    border-top: 0;
    padding: 0;
  }
}

/* Optional helper: show table first on phones */
.tcc-mobile-reverse { display: contents; }
@media (max-width: 899px) {
  .tcc-mobile-reverse > :first-child { order: 2; } /* form second */
  .tcc-mobile-reverse > :last-child  { order: 1; } /* table first */
}