/* Incentive / Ops Platform - app.css
   Visual style mimics the daily-target sheet: LY block (muted), TY/target block
   (blue), actual block (green). Clean + mobile-usable (stores on tablets/phones). */
:root{
  --navy:#1f4e79; --navy-d:#163a5c; --ink:#1c2733; --muted:#6b7a8d;
  --line:#d8dee6; --bg:#f4f6f9; --card:#ffffff;
  --ly:#eef1f4; --ty:#e8f0f9; --ty-ink:#1f4e79; --ac:#e9f6ec; --ac-ink:#1f7a3d;
  --up:#1f7a3d; --down:#b5452f; --warn:#8a6d00; --err:#b5452f;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:15px;line-height:1.4}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;
  background:var(--navy);color:#fff;padding:10px 16px}
.topbar strong{font-size:16px;letter-spacing:.2px}
.topbar nav a{color:#dbe7f3;text-decoration:none;margin-left:14px;font-size:14px}
.topbar nav a:hover{color:#fff;text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:16px}
h1{font-size:22px;margin:.3em 0 .4em}
h3{margin:.2em 0 .5em;font-size:16px}
.muted{color:var(--muted);font-size:13px}
a{color:var(--navy)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0;
  box-shadow:0 1px 2px rgba(20,40,70,.04)}
.row{display:flex;flex-wrap:wrap;gap:12px}
.row .card{flex:1 1 280px;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;
  text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--navy);box-shadow:0 2px 6px rgba(20,40,70,.08)}
.tile strong{display:block;color:var(--navy);margin-bottom:4px}
.tile span{font-size:13px;color:var(--muted)}
label{display:block;font-size:13px;color:var(--muted);margin:8px 0 2px}
input,select{font:inherit;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;max-width:100%}
input:focus,select:focus{outline:2px solid #bcd3ec;border-color:var(--navy)}
form.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
form.inline input,form.inline select{margin:0}
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:7px;padding:9px 16px;
  font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--navy-d)}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.btn.warn{background:var(--warn)}
.btn.tiny{padding:5px 10px;font-size:13px}
button[disabled],input[disabled],select[disabled]{opacity:.5;cursor:not-allowed}
.badge{display:inline-block;background:#e3e9f1;color:var(--navy);border-radius:5px;padding:1px 7px;font-size:11px;
  font-weight:700;letter-spacing:.3px}
.flash{padding:10px 14px;border-radius:8px;margin:10px 0;font-size:14px}
.flash.ok{background:#e6f5ec;color:#1f7a3d;border:1px solid #bfe3cd}
.flash.err{background:#fbe9e5;color:#b5452f;border:1px solid #f0c7bd}
.flash.warn{background:#fcf3d9;color:#8a6d00;border:1px solid #efe0ab}
/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:14px}
table.list th,table.list td,table.sheet th,table.sheet td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left}
table.list.small{font-size:13px}
table.sheet th{position:sticky;top:0;background:#f0f3f7;font-size:12px;white-space:nowrap}
table.sheet td.num,table.list td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.sheet th.ly,table.sheet td.ly{background:var(--ly)}
table.sheet th.ty,table.sheet td.ty{background:var(--ty);color:var(--ty-ink)}
table.sheet th.ac,table.sheet td.ac{background:var(--ac);color:var(--ac-ink)}
table.sheet tr.has-actual td{font-weight:500}
table.sheet input.cap{width:92px;padding:5px 6px;text-align:right}
.detail{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted);max-width:380px;overflow:hidden}
/* dashboard tiles (MTD) */
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0}
.tilebox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tilebox span{display:block;font-size:12px;color:var(--muted)}
.tilebox strong{display:block;font-size:22px;margin:3px 0}
.tilebox em{font-style:normal;font-size:12px;color:var(--muted)}
.tilebox strong.up{color:var(--up)}
.tilebox strong.down{color:var(--down)}
.pager{margin:12px 0;display:flex;gap:8px}
code{background:#eef1f4;padding:1px 5px;border-radius:4px;font-size:12px}
.foot{max-width:1180px;margin:20px auto;padding:14px 16px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .wrap{padding:12px}
  h1{font-size:19px}
  table.sheet input.cap{width:80px}
}