/* TripTracker — minimal mobile-first CSS */
:root {
  --bg:#f7f7f8; --card:#ffffff; --ink:#1f2328; --muted:#6b7280;
  --line:#e5e7eb; --accent:#2563eb; --accent-ink:#ffffff;
  --ok:#065f46; --ok-bg:#d1fae5; --err:#991b1b; --err-bg:#fee2e2;
  --pos:#047857; --neg:#b91c1c; --bot:#7c3aed; --gps:#0891b2;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16px; line-height:1.45; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.top { display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; color:var(--ink); }
.top nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }

.container { max-width: 880px; margin: 0 auto; padding: 1rem; }
.narrow { max-width: 520px; margin-inline:auto; }

.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:1rem; margin-bottom:1rem; }
h1,h2,h3 { margin: .2rem 0 .6rem; }

.flash { padding:.6rem 1rem; margin:0; border-bottom:1px solid var(--line); }
.flash.err { background:var(--err-bg); color:var(--err); }
.flash.ok  { background:var(--ok-bg);  color:var(--ok); }

input, select, textarea, button {
  font: inherit; padding:.5rem .6rem; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink); }
textarea.full { width:100%; }
label { display:block; margin: .3rem 0; }
label input, label select, label textarea { width:100%; margin-top:.2rem; }

.btn, button.primary, button.btn {
  cursor:pointer; padding:.5rem .9rem; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--ink); display:inline-block; }
.btn.primary, .primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn.danger,  .danger  { background:#fff; color:var(--err); border-color:#fecaca; }
button.link { background:none; border:none; color:var(--accent); cursor:pointer; padding:.2rem .3rem; }
button.link.danger { color:var(--err); }
.small { font-size:.85rem; }
.muted { color:var(--muted); }
.center { text-align:center; }
.r { text-align:right; }
.warn { color:var(--err); font-weight:600; }
.mt { margin-top:.8rem; }

.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.spread { justify-content:space-between; width:100%; }
.inline-form, .inline { display:inline-flex; gap:.3rem; align-items:center; }

.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
.grid2 .span2, .span2 { grid-column: 1 / -1; }

.tag { display:inline-block; padding:.05rem .4rem; border-radius:999px;
  background:#eef2ff; color:#3730a3; font-size:.72rem; margin-left:.3rem; }
.tag.danger { background:var(--err-bg); color:var(--err); }
.tag.bot { background:#ede9fe; color:var(--bot); }
.tag.gps { background:#cffafe; color:var(--gps); }

table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:.45rem .4rem; border-bottom:1px solid var(--line); vertical-align: top; }
.bal-table .pos { color:var(--pos); font-weight:600; }
.bal-table .neg { color:var(--neg); font-weight:600; }

.trip-list { list-style:none; padding:0; margin:0; }
.trip-list li { padding:.6rem 0; border-bottom:1px solid var(--line); }
.trip-head { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }

.tabs { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom: .8rem; }
.tab { padding:.35rem .7rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); }
.tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Chat */
.chat-section { display:flex; flex-direction:column; gap:.6rem; }
.chat-list { display:flex; flex-direction:column; gap:.4rem; max-height: 60vh; overflow-y:auto; padding:.2rem; }
.chat-item { padding:.5rem .6rem; border:1px solid var(--line); border-radius:10px; background:#fff; }
.chat-item.bot { border-color:#ddd6fe; }
.chat-item.gps { border-color:#a5f3fc; }
.chat-meta { display:flex; justify-content:space-between; gap:.6rem; font-size:.75rem; color:var(--muted); }
.chat-img { max-width:100%; max-height:260px; border-radius:8px; margin-top:.3rem; }
.chat-compose { display:flex; gap:.4rem; align-items:flex-start; }
.chat-compose textarea { flex:1; min-height: 2.6rem; }
.chat-actions { display:flex; gap:.3rem; flex-wrap:wrap; }

/* Expenses */
.exp-list { list-style:none; padding:0; margin:0; }
.exp-item { padding:.5rem .2rem; border-bottom:1px solid var(--line); }
.amount { font-variant-numeric: tabular-nums; }
.amount.big { font-weight:700; font-size:1.1rem; }

.foot { text-align:center; padding:1rem; color:var(--muted); }

dl dt { font-weight:600; margin-top:.4rem; }
dl dd { margin:0 0 .2rem; }

@media (max-width: 480px) {
  .grid2 { grid-template-columns: 1fr; }
  .top nav { gap:.6rem; }
}