/* ==== Applehouse Construction Tracker – Clean Theme ==== */
:root{
  --brand:#ff6600;           /* Applehouse orange (pwede palitan) */
  --text:#111;
  --muted:#777;
  --line:#e5e5e5;
  --chip:#ddd;
  --bg-lite:#fafafa;
}

*{box-sizing:border-box}
body{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:20px; color:var(--text);
}
h1,h2{margin:0 0 12px;}
.wrap{max-width:1100px;margin:0 auto;}

/* TAB links only (exclude .btn) */
.topbar a:not(.btn){
  padding:8px 10px; border:1px solid #ddd; border-radius:8px;
  text-decoration:none; color:var(--text); background:#fff;
}

/* Active TAB (exclude .btn) */
.topbar a:not(.btn).active{
  background:var(--brand); color:#fff; border-color:var(--brand);
}

/* Action buttons keep orange, distinct from tabs */
.btn, button{
  padding:8px 12px; border:1px solid var(--brand);
  border-radius:10px; background:var(--brand); color:#fff;
  cursor:pointer; text-decoration:none; display:inline-block;
}


/* buttons (Add / Export) */
.btn, button{
  padding:8px 12px; border:1px solid var(--brand);
  border-radius:10px; background:var(--brand); color:#fff;
  cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover, button:hover{opacity:.9}

/* ensure .btn inside .topbar stays white text (overrides .topbar a color) */
.topbar a.btn{ color:#fff !important; border-color:var(--brand); background:var(--brand); }

/* -------- Cards / Tables -------- */
.card{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:16px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{
  border-bottom:1px solid #eee; padding:8px; text-align:left; font-size:14px; vertical-align:top
}
.table th{background:var(--bg-lite)}
.total{font-weight:700}
.badge{
  display:inline-block; padding:2px 8px; border:1px solid var(--chip);
  border-radius:999px; font-size:12px; color:#444; background:#fff;
}

/* -------- Controls / Inputs -------- */
.controls{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0}
input[type=date],input[type=text],input[type=number],select{
  padding:6px 8px; border:1px solid #ddd; border-radius:8px; background:#fff; color:var(--text)
}
input::placeholder{color:#999}

/* -------- Receipts / Misc -------- */
img.receipt{max-width:160px; border-radius:8px; border:1px solid #eee}
.small{font-size:12px; color:var(--muted)}

/* -------- Summary Grid -------- */
.summary-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.summary-grid .card h3{margin:0 0 6px; font-size:14px; color:#666}
.summary-grid .card .val{font-size:20px; font-weight:700}
@media (max-width:720px){.summary-grid{grid-template-columns:1fr}}