:root {
  --purple: #5D468E;
  --purple-2: #9C8AC8;
  --purple-soft: #EFEBF7;
  --teal: #2B797B;
  --teal-soft: #E3F0F0;
  --salmon: #F8AB97;
  --salmon-soft: #FDEDE8;
  --beige: #EBE6E0;
  --bg: #F6F3EF;
  --card: #FFFFFF;
  --ink: #34393D;
  --muted: #6E7479;
  --line: #E4DED7;
  --red: #B4413A;
  --red-soft: #F8E3E1;
  --amber: #A86A12;
  --amber-soft: #FBEFD9;
  --green: #2B797B;
  --green-soft: #E3F0F0;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(52,57,61,.06), 0 4px 16px rgba(52,57,61,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--purple); }
.boot { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--purple); color: #fff;
  display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 58px;
}
.wordmark { font-family: "Kaushan Script", cursive; font-size: 26px; line-height: 1; white-space: nowrap; }
.wordmark small { font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; opacity: .8; margin-left: 8px; letter-spacing: .02em; }
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav button {
  background: none; border: 0; color: rgba(255,255,255,.78); padding: 8px 12px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; font-weight: 500;
}
.nav button:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav button.active { color: var(--purple); background: #fff; }
.nav .badge { background: var(--salmon); color: var(--ink); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 6px; font-weight: 700; }
.who { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.who .name { font-weight: 600; }
.who .role { font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
.who button { background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.who button:hover { background: rgba(255,255,255,.22); }

main { max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 12px; }
.sub { color: var(--muted); margin: 0 0 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff;
  border-radius: 9px; padding: 8px 14px; cursor: pointer; font-weight: 500; white-space: nowrap;
}
.btn:hover { border-color: var(--purple-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.primary:hover { background: #4E3A79; }
.btn.teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.danger { color: var(--red); }
.btn.danger.solid { background: var(--red); color: #fff; border-color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--purple-soft); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: #fff; min-width: 0;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--purple-2); outline-offset: 1px; }
textarea { resize: vertical; }
label.field { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
label.field input, label.field select, label.field textarea { font-size: 14px; font-weight: 400; color: var(--ink); }
.seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: none; padding: 7px 12px; cursor: pointer; border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--purple-soft); color: var(--purple); font-weight: 600; }

/* ---------- cards & tables ---------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .grid.two { grid-template-columns: 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.kpi .l { color: var(--muted); font-size: 12px; font-weight: 500; }
.kpi.alert .v { color: var(--red); }
.kpi.good .v { color: var(--teal); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: #FBFAF8; position: sticky; top: 0; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--purple); }
tr.click { cursor: pointer; }
tr.click:hover td { background: #FBFAF8; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.chip { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip.draft { background: #EEF0F1; color: var(--muted); }
.chip.submitted { background: var(--amber-soft); color: var(--amber); }
.chip.approved { background: var(--green-soft); color: var(--green); }
.chip.rejected { background: var(--red-soft); color: var(--red); }
.chip.none { background: var(--red-soft); color: var(--red); }
.chip.partial { background: var(--amber-soft); color: var(--amber); }
.chip.full { background: var(--green-soft); color: var(--green); }
.chip.leave { background: var(--purple-soft); color: var(--purple); }
.chip.role-admin { background: var(--purple); color: #fff; }
.chip.role-tl { background: var(--purple-soft); color: var(--purple); }
.chip.role-employee { background: #EEF0F1; color: var(--muted); }

.bar { height: 6px; background: #EEE9E3; border-radius: 4px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--teal); }
.bar.warn > i { background: var(--amber); }
.bar.bad > i { background: var(--red); }

/* ---------- timesheet week ---------- */
.week-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.week-total { font-weight: 700; font-size: 18px; }
.day { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.day-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.day-head .date { font-weight: 700; min-width: 130px; }
.day-head .date small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.day.today .day-head { background: var(--purple-soft); }
.day.off { opacity: .75; }
.day-hours { font-weight: 700; font-variant-numeric: tabular-nums; }
.day-hours.short { color: var(--amber); }
.day-hours.ok { color: var(--teal); }
.entry { display: grid; grid-template-columns: 1.3fr 70px 3fr auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #F1ECE6; }
.entry:last-child { border-bottom: 0; }
.entry .proj { font-weight: 600; }
.entry .proj small { display: block; font-weight: 400; color: var(--muted); }
.entry .hrs { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.entry .task { white-space: pre-wrap; word-break: break-word; }
.entry .note { color: var(--red); font-size: 12px; margin-top: 2px; }
.entry-form { display: grid; grid-template-columns: 1.3fr 90px 3fr auto auto; gap: 10px; padding: 12px 16px; background: #FBFAF8; align-items: start; }
.entry-form textarea { min-height: 38px; }
.entry-form .chk { display: flex; align-items: center; gap: 6px; padding-top: 9px; white-space: nowrap; font-size: 13px; }
@media (max-width: 760px) {
  .entry, .entry-form { grid-template-columns: 1fr 70px; }
  .entry .task, .entry-form textarea { grid-column: 1 / -1; }
}
.empty { padding: 14px 16px; color: var(--muted); }
.holiday-tag { background: var(--salmon-soft); color: #9A4A36; }

/* ---------- heatmap ---------- */
.heat td.h { text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 38px; padding: 6px 4px; border: 1px solid #fff; }
.heat td.h0 { background: var(--red-soft); color: var(--red); }
.heat td.h1 { background: var(--amber-soft); color: var(--amber); }
.heat td.h2 { background: #CDE5E3; color: var(--teal); }
.heat td.h3 { background: var(--teal); color: #fff; }
.heat td.hL { background: var(--purple-soft); color: var(--purple); }
.heat td.hX { background: #F4F1ED; color: #B9B3AC; }
.heat th.d { text-align: center; padding: 6px 4px; }
.heat td.name { white-space: nowrap; position: sticky; left: 0; background: #fff; z-index: 1; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(140deg, #4A3772 0%, var(--purple) 45%, var(--teal) 100%); }
.auth .card { width: 100%; max-width: 380px; padding: 30px; }
.auth .wordmark { color: var(--purple); font-size: 40px; text-align: center; }
.auth .tag { text-align: center; color: var(--muted); margin: 6px 0 22px; }
.auth form { display: grid; gap: 14px; }
.err { color: var(--red); font-size: 13px; min-height: 18px; }

/* ---------- drawer & modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(52,57,61,.35); z-index: 50; display: flex; justify-content: flex-end; }
.drawer { background: #fff; width: min(720px, 100%); height: 100%; overflow-y: auto; padding: 22px; box-shadow: -8px 0 30px rgba(0,0,0,.12); }
.modal-wrap { align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: var(--radius); padding: 22px; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; }
.secret { font-family: ui-monospace, Menlo, monospace; background: var(--purple-soft); padding: 10px 12px; border-radius: 8px; font-size: 15px; user-select: all; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 10px; opacity: 0; transition: .2s; pointer-events: none; z-index: 100; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: var(--red); }

.callout { border-left: 4px solid var(--red); background: var(--red-soft); padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; }
.callout.ok { border-color: var(--teal); background: var(--teal-soft); }
.list-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.list-names span { background: #fff; padding: 3px 9px; border-radius: 14px; font-size: 12px; font-weight: 500; }
details summary { cursor: pointer; font-weight: 600; }
.mb { margin-bottom: 16px; }
.mt { margin-top: 16px; }

/* ---------- mobile header ---------- */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px 8px; gap: 8px; }
  .wordmark { font-size: 22px; }
  .who { margin-left: auto; gap: 6px; }
  .who .right { display: none; }
  .who button { padding: 5px 8px; font-size: 12px; }
  .nav { order: 3; flex-basis: 100%; }
  main { padding: 16px 14px 50px; }
  .kpi .v { font-size: 22px; }
}
.heat { width: auto; }
.heat td.name { min-width: 180px; padding-right: 16px; }

.auth-stack { display: grid; gap: 14px; }
.auth form { display: grid; gap: 14px; }
.btn.google { justify-content: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 10px 14px; font-weight: 600; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-input { font-size: 22px !important; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }

.bulkbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; position: sticky; top: 66px; z-index: 5; }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.lead-list { margin-top: 10px; display: grid; gap: 2px; }
.lead-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 8px; }
.lead-row:hover { background: #FBFAF8; }
.callout .lead-row:hover { background: rgba(255,255,255,.5); }
.sm-select { padding: 5px 8px; font-size: 13px; max-width: 170px; }
@media (max-width: 760px) { .bulkbar { position: static; } .lead-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Cittaa brand layer (Brand Colors & Fonts sheet)
   Core: Purple #5D468E, Pastel Purple #9C8AC8, Teal #2B797B, Sage #AFD2C8, Charcoal #34393D, Beige #EBE6E0
   Youth accents: Salmon #F8AB97, Cream Yellow #F4E5BA, Mint #D6E9D5
   Type: Satoshi for body. Gelica and Ivy Mode are Adobe-licensed, so Fraunces stands in for titles and numerals.
   ===================================================================== */
:root {
  --purple: #5D468E; --purple-2: #9C8AC8; --purple-soft: #EFEBF7; --purple-deep: #4A3772;
  --teal: #2B797B; --sage: #AFD2C8; --teal-soft: #E4F0EC;
  --salmon: #F8AB97; --salmon-soft: #FDE9E2; --cream: #F4E5BA; --cream-soft: #FBF4DD; --mint: #D6E9D5;
  --beige: #EBE6E0; --bg: #F4F0EB; --ink: #34393D; --muted: #6A7075; --line: #E3DCD3;
  --red: #A8402F; --red-soft: var(--salmon-soft);
  --amber: #7A5B12; --amber-soft: var(--cream);
  --green: #2B797B; --green-soft: var(--mint);
  --display: "Gelica", "Fraunces", Georgia, serif;
  --numeral: "Ivy Mode", "Fraunces", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font-family: var(--display); font-weight: 500; font-size: 28px; letter-spacing: -.01em; }
h2 { font-weight: 700; }
.kpi .v, .week-total, .day-hours, .drawer h1 { font-family: var(--numeral); font-weight: 500; }
.kpi .v { font-size: 34px; line-height: 1.1; }
.week-total { font-size: 26px; }

/* ---- top bar ---- */
.topbar { background: linear-gradient(90deg, var(--purple-deep), var(--purple) 55%, #5A5A96); box-shadow: 0 2px 14px rgba(74,55,114,.25); }
.nav button { transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.nav button.active { animation: pop .35s var(--ease); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.nav .badge { background: var(--salmon); animation: pulse 2.2s ease-in-out infinite; }

/* ---- section headers (segments) ---- */
h3.section { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--purple); }
h3.section::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--salmon); }
h3.section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--purple-2), transparent); opacity: .5; }
h3.section:first-of-type { margin-top: 8px; }

/* ---- cards and KPI tiles ---- */
.card, .kpi, .day { border: 1px solid rgba(93,70,142,.07); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.kpi { position: relative; overflow: hidden; padding: 16px 18px 14px; }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--purple-2); }
.kpi:nth-child(2)::before { background: var(--salmon); }
.kpi:nth-child(3)::before { background: var(--teal); }
.kpi:nth-child(4)::before { background: var(--purple); }
.kpi:nth-child(5)::before { background: var(--sage); }
.kpi:nth-child(6)::before { background: var(--cream); }
.kpi:hover, .lead-card:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(93,70,142,.14); }
.kpi.alert .v { color: var(--red); }
.kpi.good .v { color: var(--teal); }
.kpi .l { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }

/* ---- status colours from the accent layer ---- */
.chip { transition: transform .15s var(--ease); }
.chip.draft, .chip.role-employee { background: var(--beige); color: #5B6166; }
.chip.submitted, .chip.partial { background: var(--cream); color: var(--amber); }
.chip.approved, .chip.full { background: var(--mint); color: #1F6163; }
.chip.rejected, .chip.none { background: var(--salmon-soft); color: var(--red); }
.chip.leave, .chip.role-tl { background: var(--purple-soft); color: var(--purple); }
.holiday-tag { background: var(--cream); color: var(--amber); }
.callout { border-left-color: var(--salmon); background: var(--salmon-soft); }
.callout.ok { border-left-color: var(--teal); background: var(--mint); }
.bar { background: var(--beige); height: 7px; }
.bar > i { background: linear-gradient(90deg, var(--teal), var(--sage)); border-radius: 4px; transform-origin: left; }
.bar.warn > i { background: linear-gradient(90deg, #C99A2E, var(--cream)); }
.bar.bad > i { background: linear-gradient(90deg, var(--red), var(--salmon)); }
.heat td.h0 { background: var(--salmon-soft); color: var(--red); }
.heat td.h1 { background: var(--cream); color: var(--amber); }
.heat td.h2 { background: var(--sage); color: #1F5A5C; }
.heat td.h3 { background: var(--teal); color: #fff; }
.heat td.hL { background: var(--purple-soft); color: var(--purple); }
.heat td.h { transition: transform .15s var(--ease); border-radius: 6px; }
.heat td.h:hover { transform: scale(1.12); }
.day.today .day-head { background: linear-gradient(90deg, var(--purple-soft), #fff); }
.day.today { border-color: var(--purple-2); }
th { background: #FAF8F5; }

/* ---- controls ---- */
.btn { transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(93,70,142,.15); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn.primary { background: linear-gradient(135deg, var(--purple), #6E57A3); }
.btn.primary:hover { background: linear-gradient(135deg, var(--purple-deep), var(--purple)); }
.btn.teal { background: linear-gradient(135deg, var(--teal), #3A8F8A); }
.seg { padding: 3px; gap: 2px; border-radius: 11px; }
.seg button { border: 0 !important; border-radius: 8px; transition: background .2s var(--ease), color .2s; font-weight: 500; }
.seg button:hover:not(.active):not(:disabled) { background: var(--beige); }
.seg button.active { background: var(--purple); color: #fff; box-shadow: 0 2px 6px rgba(93,70,142,.3); animation: pop .3s var(--ease); }
input, select, textarea { transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(156,138,200,.25); }
tr.click td { transition: background .15s; }
.entry { transition: background .15s; }
.entry:hover { background: #FBFAF8; }

/* ---- sign-in ---- */
.auth { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--purple-deep), var(--purple) 45%, var(--teal));
  background-size: 180% 180%; animation: drift 16s ease-in-out infinite alternate; }
.auth::before, .auth::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; }
.auth::before { width: 420px; height: 420px; background: var(--salmon); top: -120px; right: -80px; animation: float 14s ease-in-out infinite; }
.auth::after { width: 380px; height: 380px; background: var(--sage); bottom: -140px; left: -90px; animation: float 18s ease-in-out infinite reverse; }
.auth .card, .auth .modal { position: relative; z-index: 1; animation: rise .6s var(--ease) both; box-shadow: 0 20px 60px rgba(30,20,60,.35); border: 0; }
.auth .tag { font-family: var(--display); font-size: 16px; letter-spacing: .02em; }

/* ---- motion ---- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes drift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 40px); } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

main.enter > * { animation: rise .5s var(--ease) both; }
main.enter > *:nth-child(2) { animation-delay: .05s; }
main.enter > *:nth-child(3) { animation-delay: .10s; }
main.enter > *:nth-child(4) { animation-delay: .15s; }
main.enter > *:nth-child(5) { animation-delay: .20s; }
main.enter > *:nth-child(6) { animation-delay: .25s; }
main.enter > *:nth-child(n+7) { animation-delay: .30s; }
main.enter .kpi { animation: rise .5s var(--ease) both; }
main.enter .kpi:nth-child(2) { animation-delay: .06s; } main.enter .kpi:nth-child(3) { animation-delay: .12s; }
main.enter .kpi:nth-child(4) { animation-delay: .18s; } main.enter .kpi:nth-child(5) { animation-delay: .24s; }
main.enter .kpi:nth-child(6) { animation-delay: .30s; }
main.enter .bar > i { animation: grow .8s var(--ease) .25s both; }
main.enter .lead-card { animation: rise .5s var(--ease) both; }
main.enter .lead-card:nth-child(2) { animation-delay: .07s; } main.enter .lead-card:nth-child(3) { animation-delay: .14s; }
main.enter .lead-card:nth-child(n+4) { animation-delay: .21s; }
.overlay { animation: fade .2s ease both; }
.drawer { animation: slideIn .3s var(--ease) both; }
.modal { animation: rise .3s var(--ease) both; }
#toast { transition: opacity .25s var(--ease), transform .25s var(--ease); background: var(--ink); border-left: 4px solid var(--sage); }
#toast.bad { background: var(--ink); border-left-color: var(--salmon); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.auth form .btn { justify-content: center; padding: 10px 14px; }

/* =====================================================================
   Office theme: matches office.cittaa.in
   Manrope 15px, ink #272430, muted #716C7B, hairline #EBE9EF, page #FAF9F7,
   white bordered cards (radius 10, no shadow), lilac active nav #EFEBF6 / #463A63, logo purple #635591.
   Status colours keep the brand accent layer (mint, cream, salmon).
   ===================================================================== */
:root {
  --purple: #635591; --purple-deep: #463A63; --purple-2: #A99CCB; --purple-soft: #EFEBF6;
  --bg: #FAF9F7; --ink: #272430; --muted: #716C7B; --line: #EBE9EF; --beige: #F3F1ED;
  --display: "Manrope", ui-sans-serif, system-ui, sans-serif; --numeral: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --radius: 10px; --shadow: none;
}
body { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; font-size: 15px; letter-spacing: -.005em; background: var(--bg); color: var(--ink); }
h1 { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -.025em; margin: 0 0 4px; }
h2 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.muted, .sub { color: var(--muted); }
.sub, h1 + .muted, .row > div > .muted { font-size: 14px; }

/* top bar */
.topbar { background: #fff; color: var(--ink); height: 65px; padding: 0 28px; box-shadow: none; border-bottom: 1px solid var(--line); gap: 16px; flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 14px; }
.wordmark { font-family: "Kaushan Script", cursive; font-size: 24px; color: var(--purple); letter-spacing: .01em; }
.brand-bar { color: var(--line); font-weight: 300; font-size: 18px; }
.product { text-transform: uppercase; letter-spacing: .28em; font-size: 14px; font-weight: 500; color: var(--ink); }
.who { gap: 14px; }
.who .right { display: block; }
.who .name { font-weight: 500; font-size: 14px; }
.who .role { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); opacity: 1; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--purple-soft); color: var(--purple-deep); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.who button { background: transparent; color: var(--ink); border: 0; font-weight: 500; font-size: 14px; padding: 8px 10px; border-radius: 10px; }
.who button:hover { background: var(--beige); }

/* layout + sidebar */
.layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
.side { padding: 24px 16px 24px 28px; position: sticky; top: 65px; align-self: start; height: calc(100vh - 65px); overflow-y: auto; }
.side-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 6px 12px 10px; }
.side-label:not(:first-child) { margin-top: 26px; }
.side .nav { display: grid; gap: 2px; overflow: visible; }
.side .nav button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 10px;
  padding: 8px 12px; font-size: 14px; font-weight: 400; color: var(--muted); cursor: pointer; box-shadow: none; animation: none; white-space: nowrap; }
.side .nav button:hover { background: var(--beige); color: var(--ink); }
.side .nav button.active { background: var(--purple-soft); color: var(--purple-deep); font-weight: 500; box-shadow: none; }
.side .nav button svg { flex: none; }
.side .nav .badge { margin-left: auto; background: var(--purple); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 600; animation: none; }
main { max-width: none; margin: 0; padding: 28px 32px 64px 16px; }

/* cards, tables, tiles */
.card, .kpi, .day, .modal, .drawer { box-shadow: none; }
.card, .kpi, .day { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.card { padding: 16px 18px; }
.kpi { padding: 14px 16px; }
.kpi::before { display: none; }
.kpi .v { font-family: var(--numeral); font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.kpi .l { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.kpi:hover, .lead-card:hover { transform: none; box-shadow: none; border-color: var(--purple-2); }
.week-total, .day-hours, .drawer h1 { font-family: var(--numeral); font-weight: 500; }
th { background: transparent; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
td { border-bottom: 1px solid var(--line); }
tr.click:hover td { background: var(--bg); }
strong { font-weight: 600; }
h3.section { color: var(--ink); font-size: 18px; font-weight: 500; letter-spacing: -.02em; text-transform: none; margin: 28px 0 12px; }
h3.section::before, h3.section::after { display: none; }
.day.today { border-color: var(--purple-2); }
.day.today .day-head { background: var(--purple-soft); }
.day-head { border-bottom: 1px solid var(--line); }
.entry { border-bottom: 1px solid var(--line); }
.entry-form { background: var(--bg); }
.callout { border: 1px solid #F6D3C8; border-left-width: 1px; border-radius: 10px; }
.callout.ok { border-color: #BFDDC0; }
.chip { font-weight: 500; border-radius: 20px; }
.chip.role-admin { background: var(--purple); }
.chip.draft, .chip.role-employee { background: var(--beige); color: var(--muted); }

/* controls */
.btn { border-radius: 10px; border: 1px solid var(--line); font-weight: 500; font-size: 14px; box-shadow: none; }
.btn:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--purple-2); background: var(--bg); }
.btn.primary, .btn.primary:hover { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--purple-deep); border-color: var(--purple-deep); }
.btn.teal { background: var(--teal); border-color: var(--teal); }
.btn.teal:hover:not(:disabled) { background: #236567; }
.btn.ghost { border-color: transparent; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { border-radius: 10px; border-color: var(--line); background: #fff; font-size: 14px; }
main > .row input[type=text], .card > .row input[type=text] { background: var(--bg); }
input:focus, select:focus, textarea:focus { border-color: var(--purple-2); box-shadow: 0 0 0 3px rgba(99,85,145,.12); }
.seg { border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: #fff; }
.seg button.active { background: var(--purple-soft); color: var(--purple-deep); box-shadow: none; animation: none; font-weight: 500; }
.overlay { background: rgba(39,36,48,.28); }
.modal { border: 1px solid var(--line); border-radius: 12px; }
.drawer { border-left: 1px solid var(--line); }
.bulkbar { top: 77px; }
#toast { border-radius: 10px; font-size: 14px; }

/* sign-in: same calm surface as the workspace */
.auth { background: var(--bg); animation: none; }
.auth::before { background: var(--purple-soft); opacity: .9; filter: blur(80px); }
.auth::after { background: var(--mint); opacity: .7; filter: blur(80px); }
.auth .card, .auth .modal { border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(39,36,48,.06); border-radius: 14px; }
.auth .wordmark { font-size: 38px; text-align: center; display: block; }
.auth .tag { font-family: inherit; text-transform: uppercase; letter-spacing: .28em; font-size: 13px; font-weight: 500; color: var(--ink); margin: 4px 0 24px; }

/* gentler motion, like the office app */
main.enter > * { animation: rise .35s var(--ease) both; }
main.enter .kpi, main.enter .lead-card { animation: rise .35s var(--ease) both; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; padding: 10px 12px 0; overflow-x: auto; display: flex; gap: 6px; align-items: center; scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .side-label { display: none; }
  .side .nav { display: flex; gap: 4px; }
  main { padding: 16px 14px 50px; }
  .topbar { padding: 0 14px; height: 58px; }
  .who .right, .avatar { display: none; }
  .product { letter-spacing: .2em; font-size: 12px; }
  .bulkbar { position: static; }
}
table { font-size: 14px; }
td strong { white-space: nowrap; }
th { white-space: nowrap; }

/* edit permits */
.permit { margin: 16px 0; background: var(--bg); }
.permit-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.permit-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--purple-soft) !important; color: var(--purple-deep); }
.permit-chip .x { border: 0; background: none; cursor: pointer; color: inherit; font-size: 15px; line-height: 1; padding: 0 2px; }
@media (max-width: 560px) { .permit-row { grid-template-columns: 1fr 1fr; } .permit-row .btn { grid-column: 1 / -1; justify-content: center; } }

/* =====================================================================
   Phone and tablet layout
   ===================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
.layout > main, .card, .day, .table-wrap, .row > * { min-width: 0; }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.seg::-webkit-scrollbar { display: none; }
.seg button { white-space: nowrap; flex: none; }
.table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .topbar { position: sticky; top: 0; z-index: 30; }
  .side { position: sticky; top: 58px; z-index: 25; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 10px; height: auto; }
  .side .nav button { padding: 9px 12px; }
  main { padding: 16px 14px 72px; }
  h1 { font-size: 21px; }
  h3.section { font-size: 16px; margin: 22px 0 10px; }
  main > .row, main > .week-head { gap: 10px; }
  main > .row > .spacer, .week-head > .spacer { display: none; }
  main > .row > .seg, .week-head > .seg { width: 100%; }
  main > .row > .seg button, .week-head > .seg button { flex: 1; text-align: center; }
  main > .row > a.btn, main > .row > .btn { flex: 1; justify-content: center; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .v { font-size: 24px; }
  .grid.two { grid-template-columns: minmax(0, 1fr); }
  .drawer { width: 100%; padding: 16px; }
  .drawer .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .modal-wrap { padding: 10px; align-items: flex-end; }
  .modal { width: 100% !important; border-radius: 16px 16px 12px 12px; max-height: 88vh; }
  /* iOS zooms into inputs under 16px; keep the page steady */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { font-size: 16px; }
  .btn, .seg button, .side .nav button { min-height: 40px; }
  .btn.sm { min-height: 34px; }

  /* dashboard people list: keep what matters, the rest is one tap away in the detail panel */
  .people-table th:nth-child(2), .people-table td:nth-child(2),
  .people-table th:nth-child(3), .people-table td:nth-child(3),
  .people-table th:nth-child(4), .people-table td:nth-child(4),
  .people-table th:nth-child(7), .people-table td:nth-child(7),
  .people-table th:nth-child(9), .people-table td:nth-child(9),
  .people-table th:nth-child(10), .people-table td:nth-child(10),
  .people-table th:nth-child(11), .people-table td:nth-child(11) { display: none; }
  .people-table td strong { white-space: normal; }
  .dir-table th:nth-child(2), .dir-table td:nth-child(2),
  .dir-table th:nth-child(4), .dir-table td:nth-child(4),
  .dir-table th:nth-child(5), .dir-table td:nth-child(5) { display: none; }
  .dir-table td.nowrap { white-space: normal; }
  .appr-table th:nth-child(6), .appr-table td:nth-child(6) { display: none; }
  .appr-table td:nth-child(5) { min-width: 160px; }
  th, td { padding: 9px 6px; }

  /* my timesheet */
  .day-head { padding: 10px 12px; gap: 8px; }
  .day-head .date { min-width: 0; flex: 1; }
  .entry { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; gap: 6px 10px; }
  .entry > div:nth-child(3) { grid-column: 1 / -1; }
  .entry-form { grid-template-columns: minmax(0, 1fr) 84px; padding: 12px; }
  .entry-form textarea { grid-column: 1 / -1; min-height: 64px; }
  .entry-form .chk { padding-top: 0; align-self: center; }
  .entry-form .row { justify-content: flex-end; }
  .card.mb.row { align-items: flex-start; }
  .card.mb.row > .btn.primary { width: 100%; justify-content: center; }
  .lead-row { grid-template-columns: 22px minmax(0, 1fr); }
  .lead-row select { grid-column: 2; max-width: none; width: 100%; }
  .bulkbar > select, .bulkbar > input { flex: 1 1 140px; width: auto !important; }
  .auth { padding: 14px; }
  .auth .card { padding: 24px 20px; }
}

label.chk { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
label.chk input { flex: none; margin-top: 3px; }
@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .brand { gap: 8px; }
  .wordmark { font-size: 21px; }
  .brand-bar { display: none; }
  .product { font-size: 10.5px; letter-spacing: .16em; }
  .who { gap: 2px; }
  .who button { padding: 6px 8px; font-size: 13px; min-height: 34px; }
}

/* =====================================================================
   Day plan, priorities, daily activity, approval path, scorecards
   ===================================================================== */
.path { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; }
.path-label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-right: 6px; }
.path .step { display: inline-flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; font-size: 13px; font-weight: 500; line-height: 1.25; }
.path .step small { font-weight: 400; color: var(--muted); font-size: 11px; }
.path .step.me { background: var(--purple-soft); border-color: var(--purple-soft); color: var(--purple-deep); justify-content: center; }
.path .arrow { color: var(--muted); }
.path-note { color: var(--muted); font-size: 13px; margin-left: auto; }
.trail { color: var(--muted); font-size: 12px; margin-top: 3px; }

.plan { display: flex; gap: 14px 20px; flex-wrap: wrap; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #FDFCFB; }
.plan-loc { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.plan-loc select { padding: 6px 10px; font-size: 14px; }
.plan-loc strong { color: var(--ink); }
.plan-note { display: flex; gap: 8px; flex: 1 1 260px; }
.plan-note input { flex: 1; }
.prio { display: grid; gap: 6px; flex: 1 1 100%; max-width: 760px; }
.prio-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.prio input[type=text] { width: 100%; }
.prio-item { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 2px 0; }
.prio-item input { margin-top: 4px; }
.prio-item.done span, .prio-item.done { color: var(--muted); text-decoration: line-through; }

details.activity { border-top: 1px solid var(--line); }
details.activity > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; font-weight: 500; font-size: 14px; }
details.activity > summary::-webkit-details-marker { display: none; }
details.activity > summary::before { content: "›"; display: inline-block; transition: transform .2s; color: var(--muted); font-size: 18px; line-height: 1; }
details.activity[open] > summary::before { transform: rotate(90deg); }
details.activity form, .act-body { padding: 4px 16px 16px; }
.act-sec { margin-bottom: 14px; }
.act-sec-name, .sc-sec-name { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 6px 0 8px; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.act-field { display: grid; gap: 4px; font-size: 13px; color: var(--ink); align-content: space-between; }
.act-field input { width: 100%; font-variant-numeric: tabular-nums; }
.act-field textarea { width: 100%; }
.act-field.wide, .act-ro.wide { grid-column: 1 / -1; }
.act-ro { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 10px; background: var(--bg); border-radius: 8px; }
.act-ro.wide { flex-direction: column; gap: 2px; }
.act-ro span { color: var(--muted); }
.act-ro strong { font-weight: 500; white-space: pre-wrap; }

.office-card .office-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 0; }
.sc-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-sec + .sc-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sc-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 90px 90px minmax(80px, 1.2fr) 150px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sc-row:last-child { border-bottom: 0; }
.sc-total { font-size: 20px; font-weight: 500; text-align: right; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc-target { color: var(--muted); font-size: 13px; }
.sc-status { text-align: right; }
.sc-table th.mcol { white-space: normal; min-width: 96px; max-width: 130px; vertical-align: bottom; line-height: 1.25; text-transform: none; letter-spacing: 0; font-size: 12px; }
.sc-table .sticky { position: sticky; left: 0; background: #fff; z-index: 2; min-width: 170px; box-shadow: 1px 0 0 var(--line); }
.sc-table tr.total td { border-top: 2px solid var(--line); background: var(--bg); }
.sc-table tr.total td.sticky, .sc-table tr.target td.sticky { background: var(--bg); }
.sc-table tr.target td { background: var(--bg); border-bottom: 0; }
.note-row { padding: 9px 0; border-bottom: 1px solid var(--line); }
.note-row:last-child { border-bottom: 0; }
.note-meta { display: flex; gap: 10px; align-items: baseline; }
.note-text { white-space: pre-wrap; font-size: 14px; margin-top: 2px; }
.def-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.def-form .wide { grid-column: span 2; }
.def-table tr.inactive td { opacity: .5; }
.target-input { width: 90px; text-align: right; padding: 5px 8px; }

@media (max-width: 900px) {
  .path-note { margin-left: 0; flex-basis: 100%; }
  .office-card .office-kpis, .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .sc-row .sc-label { grid-column: 1 / -1; }
  .sc-row .sc-target { text-align: right; }
  .sc-row .sc-bar { grid-column: 1; }
  .sc-row .sc-status { grid-column: 2; }
  .sc-total { text-align: left; }
  .def-form { grid-template-columns: minmax(0, 1fr); }
  .def-form .wide { grid-column: auto; }
  .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { padding: 12px; }
  .people-table th:nth-child(2), .people-table td:nth-child(2), .people-table th:nth-child(3), .people-table td:nth-child(3),
  .people-table th:nth-child(4), .people-table td:nth-child(4), .people-table th:nth-child(8), .people-table td:nth-child(8),
  .people-table th:nth-child(10), .people-table td:nth-child(10), .people-table th:nth-child(11), .people-table td:nth-child(11),
  .people-table th:nth-child(12), .people-table td:nth-child(12) { display: none; }
  .people-table th:nth-child(7), .people-table td:nth-child(7), .people-table th:nth-child(9), .people-table td:nth-child(9) { display: table-cell; }
  main > .row > select { flex: 1 1 100%; }
}
@media (max-width: 480px) { .act-grid { grid-template-columns: minmax(0, 1fr); } }

/* printing a scorecard */
@media print {
  .topbar, .side, .no-print, #toast { display: none !important; }
  .layout { display: block; }
  main { padding: 0; }
  body { background: #fff; font-size: 12px; }
  .card, .kpi { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  .sc-table .sticky { position: static; box-shadow: none; }
  h3.section { margin-top: 16px; }
}

tr.inactive-row td { opacity: .55; }