/* /tipout/assets/app.css - styles for new screens. Everything is prefixed tp- (or scoped to body.tp-page)
   so existing pages keep their look. */
:root { --tp-blue:#2563eb; --tp-blue-d:#1d4ed8; --tp-ink:#111827; --tp-mute:#6b7280; --tp-line:#e5e7eb; --tp-bg:#f4f4f7; --tp-green:#16a34a; }
html.tp-noscroll { overflow: hidden; }

/* ---------- page shell for new pages ---------- */
body.tp-page { font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; background:var(--tp-bg); color:var(--tp-ink); }
.tp-wrap { max-width: 520px; margin: 0 auto; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.tp-card { background:#fff; border-radius:16px; padding:20px; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.tp-card h1 { font-size:21px; margin:0 0 4px; text-align:center; }
.tp-card h2 { font-size:15px; margin:18px 0 8px; text-transform:uppercase; letter-spacing:.04em; color:var(--tp-mute); }
.tp-sub { text-align:center; color:var(--tp-mute); font-size:14px; margin-bottom:14px; }
.tp-muted { color:var(--tp-mute); font-size:14px; text-align:center; }
.tp-msg { padding:9px 11px; border-radius:10px; font-size:14px; margin-bottom:10px; }
.tp-ok { background:#dcfce7; color:#166534; }
.tp-err { background:#fee2e2; color:#991b1b; }

.tp-field { display:block; margin:12px 0; }
.tp-field > span { display:block; font-size:14px; font-weight:600; margin-bottom:5px; }
.tp-field input, .tp-field select { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid #d1d5db; border-radius:10px; font-size:16px; background:#fff; color:var(--tp-ink); }
.tp-field small { display:block; color:var(--tp-mute); font-size:12px; margin-top:4px; }
.tp-check { display:flex; gap:10px; align-items:center; font-size:15px; margin:12px 0; }
.tp-check input { width:20px; height:20px; }

.tp-primary, .tp-secondary { display:block; width:100%; box-sizing:border-box; text-align:center; padding:13px 14px; border-radius:12px; font-size:16px; font-weight:700; border:0; cursor:pointer; text-decoration:none; margin-top:10px; font-family:inherit; }
.tp-primary { background:var(--tp-blue); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.25); }
.tp-primary:active { background:var(--tp-blue-d); transform:translateY(1px); }
.tp-secondary { background:#eef0f4; color:var(--tp-ink); font-weight:600; }
.tp-link { background:none; border:0; color:var(--tp-blue); font-size:14px; cursor:pointer; padding:6px 4px; font-family:inherit; }
.tp-danger-link { display:block; margin:14px auto 0; background:none; border:0; color:#b91c1c; font-size:13px; cursor:pointer; font-family:inherit; }

/* ---------- start-of-shift popup ---------- */
.tp-modal-backdrop { position:fixed; inset:0; z-index:9999; display:none; align-items:flex-end; justify-content:center;
  background:rgba(17,24,39,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.tp-modal-backdrop.open { display:flex; animation:tpfade .2s ease-out; }
.tp-modal-backdrop.tp-inline { position:static; display:block; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.tp-modal { position:relative; width:100%; max-width:440px; box-sizing:border-box; background:#fff; border-radius:24px 24px 0 0;
  padding:26px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -10px 40px rgba(0,0,0,.18); animation:tpup .28s cubic-bezier(.2,.9,.3,1.2); color:var(--tp-ink); }
.tp-inline .tp-modal { border-radius:20px; margin:0 auto; animation:none; box-shadow:0 4px 14px rgba(0,0,0,.06); }
@media (min-width:600px) { .tp-modal-backdrop.open { align-items:center; } .tp-modal { border-radius:24px; } }
@keyframes tpfade { from { opacity:0 } to { opacity:1 } }
@keyframes tpup { from { transform:translateY(40px); opacity:.4 } to { transform:none; opacity:1 } }
.tp-modal-head { text-align:center; }
.tp-wave { font-size:34px; line-height:1; }
.tp-modal h2 { margin:8px 0 2px; font-size:21px; }
.tp-modal-head p { margin:0; color:var(--tp-mute); font-size:15px; }
.tp-close { position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; border:0; background:#f3f4f6; font-size:22px; line-height:34px; color:#4b5563; cursor:pointer; }

.tp-clock { display:flex; align-items:center; justify-content:center; gap:8px; margin:22px 0 8px; }
.tp-time { min-width:150px; text-align:center; font-size:46px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#eff6ff,#e0e7ff); color:#1e3a8a; border-radius:18px; padding:10px 14px; }
.tp-time span { font-size:18px; font-weight:700; margin-left:6px; color:#3b5bdb; }
.tp-step { width:44px; height:44px; border-radius:50%; border:1px solid var(--tp-line); background:#fff; font-weight:700; font-size:13px; color:#374151; cursor:pointer; }
.tp-step:active { background:#f3f4f6; }
.tp-time-row { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:14px; }
.tp-time-row input[type=time] { font-size:16px; padding:8px 10px; border:1px solid #d1d5db; border-radius:10px; }

.tp-roles { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 4px; }
.tp-chip input { position:absolute; opacity:0; pointer-events:none; }
.tp-chip span { display:inline-block; padding:9px 14px; border-radius:999px; border:1.5px solid var(--tp-line); font-size:15px; font-weight:600; color:#374151; cursor:pointer; }
.tp-chip input:checked + span { border-color:var(--tp-blue); background:#eff6ff; color:var(--tp-blue-d); }
.tp-chip input:focus-visible + span { outline:2px solid var(--tp-blue); outline-offset:2px; }

/* ---------- tip entry ---------- */
.tipgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tipfield { display:block; background:#f9fafb; border:1px solid var(--tp-line); border-radius:12px; padding:9px 10px; }
.tipfield:first-child, .tipfield:nth-child(2) { background:#fff; }
.tiplabel { display:block; font-size:13px; font-weight:700; margin-bottom:5px; color:#1f2937; }
.tiplabel small { display:block; font-weight:500; color:var(--tp-mute); font-size:11px; }
.tipinput { display:flex; align-items:center; gap:6px; }
.tipinput .dollar { color:var(--tp-mute); font-weight:700; }
.tipinput input { width:100%; min-width:0; box-sizing:border-box; border:0; background:transparent; font-size:19px; font-weight:700; padding:2px 0; color:var(--tp-ink); outline:none; font-family:inherit; }
.signbtn { flex:none; width:30px; height:30px; border-radius:8px; border:1px solid #bbf7d0; background:#f0fdf4; color:var(--tp-green); font-weight:800; font-size:17px; cursor:pointer; }
.signbtn.neg { border-color:#fecaca; background:#fef2f2; color:#dc2626; }
.tiptotal { grid-column:1 / -1; text-align:center; padding:12px; border-radius:12px; background:#eff6ff; color:#1e3a8a; font-size:16px; }
.tiptotal strong { font-size:22px; margin-left:4px; }

/* ---------- install / notifications card ---------- */
.tp-appcard { background:linear-gradient(135deg,#eff6ff,#f5f3ff); border:1px solid #dbeafe; border-radius:14px; padding:12px 14px; margin:0 0 14px; font-size:14px; color:#1f2937; }
.tp-appcard p { margin:0 0 6px; line-height:1.4; }
.tp-appcard-btns { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tp-appcard .tp-primary { width:auto; display:inline-block; padding:9px 14px; font-size:14px; margin:4px 0 0; box-shadow:none; }
.tp-ico { display:inline-block; padding:0 4px; border:1px solid #c7d2fe; border-radius:6px; font-size:12px; }

/* ---------- payments ---------- */
.tp-tabs { display:flex; background:#f3f4f6; border-radius:10px; padding:3px; margin-bottom:10px; }
.tp-tabs a { flex:1; text-align:center; padding:8px; border-radius:8px; text-decoration:none; color:#374151; font-size:14px; font-weight:600; }
.tp-tabs a.on { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.tp-pay { border:1px solid var(--tp-line); border-radius:14px; padding:12px; margin:10px 0; }
.tp-pay.done { background:#f0fdf4; border-color:#bbf7d0; }
.tp-pay-main { display:flex; gap:12px; align-items:center; }
.tp-pay-amt { font-size:22px; font-weight:800; min-width:96px; }
.tp-pay-email { font-size:13px; color:var(--tp-mute); word-break:break-all; }
.tp-pay-email a { color:var(--tp-blue); }
.tp-pay-status { margin-top:8px; }
.tp-pay form { margin:0; }
.tp-pay .tp-primary { padding:10px; font-size:15px; }
.pill { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.ok { background:#dcfce7; color:#166534; }
.pill.wait { background:#fef3c7; color:#92400e; }
.pill.todo { background:#fee2e2; color:#991b1b; }
.tp-table { width:100%; border-collapse:collapse; font-size:13px; }
.tp-table th, .tp-table td { padding:7px 5px; border-bottom:1px solid var(--tp-line); text-align:left; }
.tp-table .r { text-align:right; }

/* ---------- admin night settings panel ---------- */
.tp-night { border:1px solid var(--tp-line); border-radius:12px; padding:12px; margin:16px 0; background:#fafafa; }
.tp-night h3 { margin:0 0 4px; font-size:15px; }
.tp-night p { margin:0 0 8px; font-size:13px; color:var(--tp-mute); }
.tp-night table { width:100%; border-collapse:collapse; font-size:13px; }
.tp-night th, .tp-night td { padding:5px 4px; border-bottom:1px solid var(--tp-line); text-align:left; }
.tp-night input[type=text] { width:70px; padding:5px 6px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; }
.tp-night button { margin-top:10px; padding:9px 14px; border:0; border-radius:8px; background:var(--tp-blue); color:#fff; font-weight:700; cursor:pointer; }