/* ==========================================================================
   tm.css — Time & Materials billing module styles.
   Reuses the frame's fx-card / fx-table / fx-btn / fx-stat system; only adds
   the T&M-specific form grid, tags, and stat sublabels.
   ========================================================================== */
.tm-list { width: 100%; }

.tm-cards .fx-stat { position: relative; }
.tm-stat__sub { display: block; font-size: 11px; color: var(--muted, #8a8a94); margin-top: 2px; }
.fx-stat.tm-stat--total { background: var(--accent-soft, rgba(47,111,79,.10)); border-color: var(--accent, #2f6f4f); }
.fx-stat.tm-stat--total .fx-stat__num { color: var(--accent, #2f6f4f); }

.tm-form { display: block; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tm-fld { display: flex; flex-direction: column; gap: 4px; }
.tm-lbl { font-size: 12px; color: var(--muted, #6b6b76); font-weight: 600; }
.tm-inp {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line, #d9d9e0);
  border-radius: 8px; background: var(--card, #fff); color: inherit; box-sizing: border-box; width: 100%;
}
.tm-inp--sm { max-width: 110px; }
.tm-inp--xs { max-width: 84px; }
.tm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.tm-inline .tm-inp { width: auto; flex: 1 1 220px; }
.tm-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tm-msg { font-size: 12px; color: var(--muted, #8a8a94); }
.tm-hint { font-size: 13px; color: var(--muted, #8a8a94); margin: 6px 0; }
.tm-subhead { font-weight: 700; font-size: 13px; margin: 14px 0 6px; color: var(--ink, #24242b); }
.tm-addwrap { border-top: 1px solid var(--line, #ececf1); margin-top: 10px; padding-top: 4px; }

.tm-sub { font-size: 11px; color: var(--muted, #9a9aa2); margin-top: 2px; }

.tm-tag, .tm-billtag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: .02em; }
.tm-tag--stock { background: #e8f0fe; color: #2456c8; }
.tm-tag--purchase { background: #fdf0e3; color: #b26a12; }
.tm-tag--field { background: #e6f4ea; color: #1e7b34; }
.tm-needprice { font-size: 11px; font-weight: 700; color: #b3261e; }
.tm-row--unpriced td { background: #fff8f6; }
.tm-clockout { margin: 0 0 8px; }
.tm-billtag--tm { background: var(--accent, #2f6f4f); color: #fff; }
.tm-billtag--contract { background: #ececf1; color: #55555f; }

.tm-mat td { vertical-align: top; }
.tm-x {
  border: none; background: transparent; color: #c0392b; font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.tm-x:hover { background: rgba(192,57,43,.12); }

.tm-stock-act { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

@media (prefers-color-scheme: dark) {
  .tm-tag--stock { background: #1e2b47; color: #8fb4ff; }
  .tm-tag--purchase { background: #3a2b16; color: #e6a862; }
  .tm-tag--field { background: #17321f; color: #7fd197; }
  .tm-row--unpriced td { background: #2e1d1b; }
  .tm-billtag--contract { background: #2a2a31; color: #b8b8c2; }
}