/* =====================================================================
   Tour Expense Manager — app styles
   Design direction: a calm "travel ledger". Deep ink navy + warm paper
   ground, a single confident teal for actions, and credit/debit encoded
   in green/coral so money state is legible at a glance. Numbers use a
   tabular figure treatment so columns of currency align. Mobile-first.
   ===================================================================== */

:root {
  --ink:        #16233a;   /* primary text / headers (deep navy, not pure black) */
  --ink-soft:   #5b6a83;   /* secondary text */
  --paper:      #f6f4ef;   /* app background — warm paper, cool navy on top */
  --surface:    #ffffff;   /* cards */
  --line:       #e4e0d7;   /* hairline borders on paper */
  --teal:       #0f766e;   /* single action accent */
  --teal-dark:  #0b5b54;
  --teal-tint:  #e6f2f0;
  --credit:     #15803d;   /* is owed / positive */
  --credit-bg:  #e8f5ec;
  --debit:      #c2410c;   /* owes / negative */
  --debit-bg:   #fbeae1;
  --warn:       #b45309;
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(22,35,58,.06), 0 8px 24px -12px rgba(22,35,58,.18);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* tabular figures everywhere numbers matter */
.num, .amount, .stat-value, table td, table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }

h1,h2,h3,h4 { color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }

.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }

/* -------------------- layout shell -------------------- */
.app { min-height: 100%; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem;
}
.topbar .brand { font-weight: 700; letter-spacing: -0.02em; color: #fff; display:flex; align-items:center; gap:.5rem; }
.topbar .brand i { color: #7fd1c8; }
.topbar .spacer { flex: 1; }
.topbar a, .topbar .icon-btn { color: #cdd6e5; }
.topbar a:hover { color: #fff; }
.topbar .notif { position: relative; }
.topbar .notif .dot {
  position: absolute; top: -4px; right: -6px; background: var(--debit);
  color:#fff; font-size:.65rem; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 1rem; flex: 1; }

/* desktop sidebar + content */
.shell { display: block; }
.sidebar { display: none; }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 232px 1fr; gap: 1.5rem; align-items: start;
           max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
  .sidebar {
    display: block; position: sticky; top: 76px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .5rem;
  }
  .sidebar a {
    display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem;
    color: var(--ink-soft); border-radius: var(--radius-sm); font-weight: 550;
  }
  .sidebar a i { width: 1.2rem; text-align:center; font-size: 1.05rem; }
  .sidebar a:hover { background: var(--paper); color: var(--ink); }
  .sidebar a.active { background: var(--teal-tint); color: var(--teal-dark); }
  .wrap { padding: 0; max-width: none; }
  .bottom-nav { display: none !important; }
  .fab { display: none !important; }
}

/* -------------------- cards -------------------- */
.card2 {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.card2 + .card2 { margin-top: 1rem; }
.card2 h2, .card2 h3 { margin-top: 0; }

.section-title { display:flex; align-items:center; justify-content:space-between; margin: 1.4rem 0 .7rem; }
.section-title h2 { margin: 0; }

/* -------------------- stat grid (dashboard) -------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat {
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem;
}
.stat .stat-label { font-size:.78rem; color: var(--ink-soft); font-weight: 550; }
.stat .stat-value { font-size: 1.4rem; font-weight: 700; margin-top:.15rem; letter-spacing:-.02em; }
.stat.credit .stat-value { color: var(--credit); }
.stat.debit .stat-value { color: var(--debit); }
.stat.accent { background: var(--ink); border-color: var(--ink); }
.stat.accent .stat-label { color:#aebacb; }
.stat.accent .stat-value { color:#fff; }

/* the "your position" hero strip */
.hero-balance {
  background: var(--ink); color:#fff; border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow);
}
.hero-balance .who { color:#aebacb; font-size:.85rem; }
.hero-balance .big { font-size: 2rem; font-weight: 750; letter-spacing:-.03em; margin:.2rem 0; }
.hero-balance .big.credit { color:#6ee7a8; }
.hero-balance .big.debit { color:#fca97e; }
.hero-balance .sub { color:#aebacb; font-size:.85rem; }

/* -------------------- money text -------------------- */
.credit { color: var(--credit); }
.debit  { color: var(--debit); }
.pill {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .55rem; border-radius: 999px; font-size:.8rem; font-weight:600;
}
.pill.credit { background: var(--credit-bg); color: var(--credit); }
.pill.debit  { background: var(--debit-bg);  color: var(--debit); }
.pill.settled{ background: #eef1f6; color: var(--ink-soft); }

/* -------------------- list rows -------------------- */
.row-item {
  display:flex; align-items:center; gap:.8rem;
  padding:.75rem 0; border-bottom:1px solid var(--line);
}
.row-item:last-child { border-bottom: 0; }
.row-item .ava { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; background:#ddd; }
.row-item .grow { flex:1; min-width:0; }
.row-item .title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-item .meta { color: var(--ink-soft); font-size:.82rem; }
.row-item .right { text-align:right; white-space:nowrap; }

/* category chip */
.cat {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; color: var(--ink-soft);
  background: var(--paper); border:1px solid var(--line);
  padding:.1rem .5rem; border-radius:999px;
}

/* -------------------- forms -------------------- */
label { font-weight:600; font-size:.9rem; margin-bottom:.3rem; display:block; }
.form-control, .form-select, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=time], textarea, select {
  width:100%; padding:.6rem .75rem; border:1px solid var(--line);
  border-radius: var(--radius-sm); font-size:1rem; background:#fff; color:var(--ink);
  font-family: inherit;
}
.form-control:focus, .form-select:focus, textarea:focus, select:focus,
input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.field { margin-bottom: 1rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.help { font-size:.8rem; color:var(--ink-soft); margin-top:.25rem; }

/* -------------------- buttons -------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.6rem 1rem; border-radius: var(--radius-sm); border:1px solid transparent;
  font-weight:600; font-size:.95rem; cursor:pointer; font-family:inherit;
  transition: background .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--teal); color:#fff; }
.btn-primary:hover { background: var(--teal-dark); color:#fff; }
.btn-ink { background: var(--ink); color:#fff; }
.btn-ink:hover { background:#0d1626; color:#fff; }
.btn-outline { background:#fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--paper); }
.btn-danger { background: var(--debit); color:#fff; }
.btn-success{ background: var(--credit); color:#fff; }
.btn-sm { padding:.4rem .7rem; font-size:.85rem; }
.btn-block { width:100%; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* -------------------- tables -------------------- */
.table2 { width:100%; border-collapse: collapse; }
.table2 th, .table2 td { padding:.6rem .5rem; text-align:left; border-bottom:1px solid var(--line); }
.table2 th { font-size:.78rem; color:var(--ink-soft); font-weight:600; }
.table2 td.r, .table2 th.r { text-align:right; }
.table2 tbody tr:hover { background: var(--paper); }

/* -------------------- alerts -------------------- */
.alert { padding:.7rem .9rem; border-radius: var(--radius-sm); margin-bottom:1rem; font-size:.92rem; border:1px solid transparent; }
.alert-error   { background: var(--debit-bg); color:#8a2c05; border-color:#f3c6ad; }
.alert-success { background: var(--credit-bg); color:#166534; border-color:#bce3c8; }
.alert-warn    { background:#fdf3e2; color:#8a5a09; border-color:#f3ddb0; }
.alert-info    { background: var(--teal-tint); color: var(--teal-dark); border-color:#bfe0dc; }

/* budget bar */
.bar { height:8px; background:#eee7db; border-radius:999px; overflow:hidden; }
.bar > span { display:block; height:100%; background: var(--teal); }
.bar > span.over { background: var(--debit); }

/* empty state */
.empty { text-align:center; padding:2.5rem 1rem; color: var(--ink-soft); }
.empty i { font-size:2.2rem; color:#c7cdd8; display:block; margin-bottom:.5rem; }

/* -------------------- bottom nav (mobile) -------------------- */
.bottom-nav {
  position: fixed; bottom:0; left:0; right:0; z-index:40;
  background: var(--surface); border-top:1px solid var(--line);
  display:flex; justify-content:space-around; padding:.35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex:1; text-align:center; color: var(--ink-soft); font-size:.68rem; padding:.25rem 0;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
}
.bottom-nav a i { font-size:1.25rem; }
.bottom-nav a.active { color: var(--teal); }

.fab {
  position: fixed; right:1rem; bottom: calc(64px + env(safe-area-inset-bottom));
  z-index:41; width:56px; height:56px; border-radius:50%;
  background: var(--teal); color:#fff; border:none; cursor:pointer;
  box-shadow: 0 6px 16px -4px rgba(15,118,110,.6);
  font-size:1.6rem; display:flex; align-items:center; justify-content:center;
}
.fab:hover { background: var(--teal-dark); }

/* give page bottom room for the mobile nav */
@media (max-width: 899px) {
  .app { padding-bottom: 74px; }
}

/* auth pages */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.auth-card { width:100%; max-width:400px; }
.auth-card .brand-lg { text-align:center; margin-bottom:1.4rem; }
.auth-card .brand-lg .logo { font-size:1.6rem; font-weight:750; letter-spacing:-.03em; color:var(--ink); }
.auth-card .brand-lg .logo i { color: var(--teal); }
.auth-card .brand-lg p { color: var(--ink-soft); margin:.25rem 0 0; }

/* utility */
.flex { display:flex; } .items-center { align-items:center; } .gap { gap:.6rem; }
.between { justify-content:space-between; }
.mt { margin-top:1rem; } .mt-2 { margin-top:1.5rem; } .mb { margin-bottom:1rem; }
.text-right { text-align:right; } .text-center { text-align:center; }
.hide { display:none; }
.chip-row { display:flex; flex-wrap:wrap; gap:.4rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}