/* Maid O' Matic - Customer & Property Cleaning Management */
:root{
  --navy:#0b2a4a; --navy-2:#113a63; --navy-3:#1b4e80;
  --green:#4cc12f; --green-d:#38a01f; --green-l:#eaf8e5;
  --ink:#15202b; --mute:#5c6b7a; --line:#dbe3ec; --bg:#f3f6fa;
  --white:#fff; --red:#c0392b; --red-l:#fdecea; --amber:#b9770e; --amber-l:#fdf3e2;
  --r:14px; --shadow:0 1px 3px rgba(11,42,74,.10),0 6px 18px rgba(11,42,74,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0 0 .4em; line-height:1.25; color:var(--navy)}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.02rem}
a{color:var(--navy-3)}
.hide{display:none !important}

/* ---------- top bar ---------- */
header.top{
  position:sticky; top:0; z-index:40; background:var(--navy); color:#fff;
  padding:10px 16px; display:flex; align-items:center; gap:12px;
  padding-top:calc(10px + env(safe-area-inset-top));
}
header.top .brand{font-weight:700; letter-spacing:.2px; font-size:1.02rem}
header.top .brand span{color:var(--green)}
header.top .who{margin-left:auto; font-size:.82rem; opacity:.9; text-align:right}
header.top button.link{background:none;border:0;color:#cfe6ff;font-size:.82rem;padding:0;cursor:pointer}

/* ---------- nav ---------- */
nav.main{background:var(--navy-2); overflow-x:auto; -webkit-overflow-scrolling:touch;
  display:flex; gap:2px; padding:0 8px; position:sticky; top:48px; z-index:39}
nav.main a{
  color:#d6e6f5; text-decoration:none; padding:11px 13px; white-space:nowrap;
  font-size:.92rem; border-bottom:3px solid transparent}
nav.main a.on{color:#fff; border-bottom-color:var(--green); font-weight:600}

main{padding:16px; max-width:1180px; margin:0 auto}
@media(max-width:600px){ main{padding:12px} }

/* ---------- cards ---------- */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px; margin:0 0 14px}
.card.tight{padding:12px}
.card h2{margin-top:0}
.grid{display:grid; gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.end{justify-content:flex-end}
.spacer{flex:1}

/* ---------- buttons ---------- */
button,.btn{
  font:inherit; font-weight:600; border-radius:11px; border:1px solid var(--navy);
  background:var(--navy); color:#fff; padding:11px 16px; cursor:pointer;
  min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none}
button.go,.btn.go{background:var(--green); border-color:var(--green-d); color:#06310a}
button.ghost,.btn.ghost{background:#fff; color:var(--navy); border-color:var(--line)}
button.danger{background:var(--red); border-color:var(--red)}
button.small{min-height:36px; padding:6px 11px; font-size:.86rem; border-radius:9px}
button:disabled{opacity:.45; cursor:not-allowed}
button.big{width:100%; min-height:62px; font-size:1.1rem}

/* ---------- forms ---------- */
label{display:block; font-size:.82rem; font-weight:600; color:var(--mute);
  text-transform:uppercase; letter-spacing:.04em; margin:12px 0 4px}
input,select,textarea{
  font:inherit; width:100%; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); min-height:46px}
textarea{min-height:88px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy-3); outline-offset:1px}
.fields{display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hint{font-size:.85rem; color:var(--mute); margin:4px 0 0}

/* ---------- chips & tags ---------- */
.tag{display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:#e8eef6; color:var(--navy-3)}
.tag.green{background:var(--green-l); color:#2a6b17}
.tag.red{background:var(--red-l); color:var(--red)}
.tag.amber{background:var(--amber-l); color:var(--amber)}
.tag.navy{background:var(--navy); color:#fff}

/* ---------- lists ---------- */
.list{list-style:none; margin:0; padding:0}
.list li{border-top:1px solid var(--line); padding:12px 2px}
.list li:first-child{border-top:0}
.item-link{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.item-link .chev{margin-left:auto; color:var(--mute)}
.muted{color:var(--mute)}
.small{font-size:.87rem}
.big-num{font-size:1.9rem; font-weight:800; color:var(--navy); line-height:1}

/* ---------- warnings ---------- */
.warn{border:2px solid var(--red); background:var(--red-l); border-radius:var(--r);
  padding:14px; margin:0 0 12px}
.warn h3{color:var(--red); margin:0 0 4px; text-transform:uppercase; letter-spacing:.03em;
  font-size:.95rem}
.note{border-left:4px solid var(--green); background:var(--green-l);
  border-radius:8px; padding:12px 14px; margin:0 0 12px}
.newflag{background:var(--amber); color:#fff; font-size:.7rem; font-weight:800;
  padding:2px 7px; border-radius:999px; text-transform:uppercase; margin-left:6px}

/* ---------- checklist ---------- */
.sect{margin:0 0 18px}
.sect>h3{background:var(--navy); color:#fff; padding:10px 14px; border-radius:11px 11px 0 0;
  margin:0; display:flex; align-items:center; gap:8px}
.sect>h3 .count{margin-left:auto; font-size:.8rem; font-weight:600; opacity:.85}
.tasks{list-style:none; margin:0; padding:0; border:1px solid var(--line);
  border-top:0; border-radius:0 0 11px 11px; overflow:hidden; background:#fff}
.tasks li{display:flex; align-items:flex-start; gap:12px; padding:14px;
  border-top:1px solid var(--line)}
.tasks li:first-child{border-top:0}
.tasks li.done{background:#f6fcf4}
.tasks li.nd{background:var(--red-l)}
.tick{flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:2px solid var(--line);
  background:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:19px; cursor:pointer; padding:0; min-height:34px; color:transparent}
.tick.on{background:var(--green); border-color:var(--green-d); color:#06310a}
.tasks li .lbl{flex:1; padding-top:4px}
.tasks li.done .lbl{color:var(--mute)}
.tasks li .x{flex:0 0 auto; width:34px; height:34px; min-height:34px; padding:0; border-radius:9px;
  background:#fff; color:var(--mute); border:2px solid var(--line); font-size:17px}
.tasks li.nd .x{background:var(--red); color:#fff; border-color:var(--red)}
.reason{font-size:.86rem; color:var(--red); margin:6px 0 0}

/* ---------- table ---------- */
table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{text-align:left; padding:9px 8px; border-top:1px solid var(--line); vertical-align:top}
th{font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mute);
  border-top:0; white-space:nowrap}
.tablewrap{overflow-x:auto}

/* ---------- sign in ---------- */
.signin{max-width:410px; margin:7vh auto; padding:0 16px}
.signin .card{padding:24px}
.logo{display:block; text-align:center; margin:0 0 18px}
.logo .mark{display:inline-block; background:var(--navy); color:#fff; border-radius:16px;
  padding:14px 20px; font-weight:800; letter-spacing:.5px}
.logo .mark span{color:var(--green)}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(11,42,74,.55); z-index:80;
  display:flex; align-items:flex-end; justify-content:center; padding:0}
.modal .sheet{background:#fff; width:100%; max-width:620px; border-radius:18px 18px 0 0;
  padding:20px; max-height:92vh; overflow:auto;
  padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@media(min-width:680px){ .modal{align-items:center; padding:20px}
  .modal .sheet{border-radius:18px} }

/* ---------- misc ---------- */
.banner{padding:10px 14px; border-radius:10px; margin:0 0 12px; font-weight:600}
.banner.off{background:var(--amber-l); color:var(--amber); border:1px solid #f0d9a8}
.banner.err{background:var(--red-l); color:var(--red); border:1px solid #f3c6c1}
.banner.ok{background:var(--green-l); color:#2a6b17; border:1px solid #bfe6b0}
.kv{display:grid; grid-template-columns:150px 1fr; gap:6px 14px; font-size:.94rem}
.kv dt{color:var(--mute); font-weight:600}
.kv dd{margin:0}
@media(max-width:520px){ .kv{grid-template-columns:1fr} .kv dt{margin-top:8px} }
.secret{font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:1px;
  background:#f1f5fa; padding:2px 8px; border-radius:6px}
.jobcard{border-left:6px solid var(--green)}
.jobcard.abnb{border-left-color:var(--navy-3)}
.jobcard h3{margin-bottom:2px}
footer.foot{text-align:center; color:var(--mute); font-size:.8rem; padding:18px 10px 34px}