/* Invoices: this app's own styles, on top of the house look (style.css, unchanged). Phone first: approvers use phones
   (Rupert, 19 Oct 2026). */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.tile { border: 1px solid var(--border); border-radius: 8px; padding: 18px; background: var(--surface); cursor: pointer; }
.tile:hover { border-color: var(--red); }
.tile-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.tile-text { color: var(--grey-text); font-size: 0.92rem; line-height: 1.4; }
.tile-soon { cursor: default; opacity: 0.7; }
.tile-soon:hover { border-color: var(--border); }
.tile-soon-label { margin-top: 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

.list-controls .search { width: 100%; max-width: 480px; }

.panel + .panel { margin-top: 18px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-green { background: var(--ok); }
.dot-amber { background: #E0A100; }
.dot-red { background: var(--red); }
#supplierForm, #approverForm { margin-top: 14px; }

@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr; }
  .data-table th, .data-table td { padding: 6px 8px; font-size: 0.85rem; }
}