/* ============================================================
   Radarkids · pine-green + school-paper
   (classes alinhadas com o markup gerado pelo app.js)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

/* --------- Tokens --------- */
:root {
  --pine:        #14584A;
  --pine-deep:   #0B3A30;
  --pine-tint:   #E1EEE7;
  --paper:       #F3F6F2;
  --paper-warm:  #F8F5EC;
  --line:        #E1E7DE;
  --ink:         #1E2B26;
  --ink-soft:    #66756E;
  --sun:         #DD9A22;
  --sun-tint:    #FCF1D8;
  --brick:       #C4563F;
  --brick-tint:  #F9E4DE;
  --sky:         #3E7FB4;
  --sky-tint:    #DBE9F4;
  --radius:      14px;
  --radius-lg:   20px;
  --shadow:      0 1px 2px rgba(11,58,48,.05), 0 6px 20px rgba(11,58,48,.08);
  --shadow-hi:   0 2px 4px rgba(11,58,48,.06), 0 14px 34px rgba(11,58,48,.14);
  --mono:        ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --grid:        22px;
}

/* --------- Reset & base --------- */
*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body {
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(20,88,74,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,88,74,.045) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', Georgia, serif; margin: 0; letter-spacing: -.01em }
h1 { font-size: 1.5rem; font-weight: 800 }
h2 { font-size: 1.25rem; font-weight: 700 }
h3 { font-size: 1.1rem; font-weight: 700 }
a { color: var(--pine); text-decoration: none; cursor: pointer }
a:hover { text-decoration: underline }
button { font: inherit }
img { max-width: 100% }
.muted { color: var(--ink-soft) }
.hidden { display: none !important }
[hidden] { display: none !important }

/* --------- Shell / contentor --------- */
#app {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px clamp(14px, 4vw, 40px) 90px;
}

/* Boot / loading */
.boot {
  min-height: 100dvh; display: grid; place-content: center;
  justify-items: center; gap: 14px; color: var(--ink-soft);
}
.spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--pine);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.boot-txt { font-weight: 600 }

/* --------- Header --------- */
header.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--pine-deep) }
.brand svg { flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(11,58,48,.15)) }
.brand h1 { font-size: 1.3rem; line-height: 1.15 }
.brand p { margin: 0; font-size: .78rem; color: var(--ink-soft) }
.hdr-right {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .85rem; color: var(--ink-soft);
}
.hdr-right em { color: var(--pine); font-style: normal; font-weight: 600 }
.linkbtn {
  border: 1.5px solid var(--line); background: #fff; color: var(--pine);
  padding: 6px 14px; border-radius: 10px; cursor: pointer; font-weight: 700;
  transition: border-color .15s, background .15s;
}
.linkbtn:hover { border-color: var(--pine); background: var(--pine-tint) }

/* --------- Tabs --------- */
nav.tabs {
  display: flex; gap: 4px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 4px; margin-bottom: 18px; box-shadow: var(--shadow);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  position: sticky; top: 8px; z-index: 50;
}
.tabbtn {
  flex: 1 0 auto; padding: 10px 14px; border: 0; background: transparent;
  color: var(--ink); border-radius: 10px; cursor: pointer;
  font-weight: 600; white-space: nowrap;
}
.tabbtn:hover { background: var(--paper-warm) }
.tabbtn.active { background: var(--pine); color: #fff }
.tabbtn .badge {
  display: inline-block; background: var(--brick); color: #fff; margin-left: 6px;
  padding: 1px 7px; border-radius: 9px; font-size: .72rem; font-weight: 700;
}
.tabbtn.active .badge { background: #fff; color: var(--pine) }
.tabbtn.qrtab { background: var(--sun-tint); color: #8B5D0F; border: 1.5px dashed var(--sun) }
.tabbtn.qrtab:hover { background: var(--sun); color: #fff }

/* --------- Secções --------- */
main.tab { min-height: 40vh }
.sect-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 6px 0 14px;
}
.sect-head .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.sect-head .acts input { width: auto }
.app-foot {
  margin-top: 40px; text-align: center;
  color: var(--ink-soft); font-size: .8rem;
}
.foot-note { text-align: center; color: var(--ink-soft); font-size: .82rem; margin-top: 16px }

/* --------- Cards & grelha --------- */
.card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-bottom: 14px;
}
.grid .card { margin-bottom: 0 }

/* Cartão de criança */
.kid { display: flex; gap: 12px }
.ph {
  width: 64px; height: 64px; border-radius: 16px; object-fit: cover;
  flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line);
}
.ph.none {
  display: inline-grid; place-items: center; font-size: 1.6rem;
  background: var(--paper-warm);
}
.nm { font-family: 'Bricolage Grotesque', serif; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rm { font-size: .82rem; color: var(--ink-soft) }
.hr { font-size: .82rem; color: var(--ink-soft); margin-top: 2px }
.stamps { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap }
.row-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px }

/* Registo: topo com relógio */
.reg-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.clock .t {
  font-family: 'Bricolage Grotesque', serif; font-weight: 800;
  font-size: 2rem; line-height: 1; color: var(--pine-deep);
  font-variant-numeric: tabular-nums;
}
.clock .d { color: var(--ink-soft); font-size: .85rem; text-transform: capitalize }

/* Miniaturas de fotos de registo */
.mini-ph {
  width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
  display: inline-block; vertical-align: middle; cursor: zoom-in;
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line);
}
.tt { font-family: var(--mono); font-size: .88rem; font-weight: 600 }

/* --------- Botões --------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pine); color: #fff; border: 0;
  padding: 10px 18px; border-radius: 12px; cursor: pointer;
  font-weight: 700; font-size: .92rem;
  transition: transform .1s ease, background .15s, border-color .15s;
  text-decoration: none;
}
.btn:hover { background: var(--pine-deep); transform: translateY(-1px); text-decoration: none }
.btn.ghost { background: #fff; color: var(--pine); border: 1.5px solid var(--line) }
.btn.ghost:hover { background: var(--pine-tint); border-color: var(--pine) }
.btn.danger, .btn.danger-solid { background: var(--brick) }
.btn.danger:hover, .btn.danger-solid:hover { background: #A94534 }
.btn.danger.sm.ghost, .btn.ghost.danger { background: #fff; color: var(--brick); border-color: var(--brick-tint) }
.btn.sky { background: var(--sky) }
.btn.sky:hover { background: #2F6592 }
.btn.sm { padding: 7px 12px; font-size: .84rem; border-radius: 10px }
.btn.big { padding: 13px 24px; font-size: 1rem }
.btn.wide { width: 100%; margin-top: 12px }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none }

/* --------- Formulários --------- */
label { display: block; font-weight: 600; margin: 12px 0 5px }
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="month"], input[type="file"],
input:not([type]), select, textarea {
  width: 100%; padding: 10px 12px;
  background: #fff; color: var(--ink);
  border: 1.6px solid var(--line); border-radius: 12px;
  font: inherit; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pine) }
input[disabled] { background: var(--paper-warm); color: var(--ink-soft) }
textarea { min-height: 70px; resize: vertical }
.err { color: var(--brick); font-weight: 600; font-size: .88rem; margin-top: 10px; min-height: 1.2em }
.hint { color: var(--ink-soft); font-size: .84rem; margin: 6px 0 }
.sub  { color: var(--ink-soft); margin: 4px 0 12px }
.notice {
  background: var(--sun-tint); border: 1.5px solid var(--sun);
  border-radius: var(--radius); padding: 12px 14px; margin: 10px 0;
}

/* Linha de contacto (modal criança) */
.contact-row {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: 1.1fr .8fr 1fr 1.1fr auto;
  margin-bottom: 8px;
}
.contact-row .rm {
  border: 1.5px solid var(--line); background: #fff; color: var(--brick);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-weight: 700;
}
.contact-row .rm:hover { border-color: var(--brick); background: var(--brick-tint) }
.photo-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.photo-line img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover }

/* Interruptor (conta ativa) */
.sw { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none }
.sw input { position: absolute; opacity: 0; width: 0; height: 0 }
.sw .tr {
  width: 42px; height: 24px; border-radius: 999px; background: var(--line);
  position: relative; transition: background .15s; flex-shrink: 0;
}
.sw .tr::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s;
}
.sw input:checked + .tr { background: var(--pine) }
.sw input:checked + .tr::after { left: 21px }

/* --------- Stamps (estados) --------- */
.stamp {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px;
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 700; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .03em; border: 1.6px solid currentColor;
  transform: rotate(-1deg); white-space: nowrap;
}
.stamp.ok   { color: var(--pine); background: var(--pine-tint) }
.stamp.warn { color: #8B5D0F; background: var(--sun-tint) }
.stamp.bad  { color: #7E2E1E; background: var(--brick-tint) }
.stamp.out  { color: #244E70; background: var(--sky-tint) }
.stamp.wait { color: var(--ink-soft); background: var(--paper-warm) }
.stamp.sky  { color: #244E70; background: var(--sky-tint) }

/* --------- Controlo segmentado (sentido da carrinha) --------- */
.seg { display: inline-flex; border: 1.6px solid var(--line, #d9d3c7); border-radius: 10px; overflow: hidden }
.seg-b {
  border: none; background: transparent; cursor: pointer;
  padding: 7px 12px; font-weight: 700; font-size: .82rem; color: var(--ink-soft);
}
.seg-b.on { background: var(--sky); color: #fff }
.inline-sel { padding: 7px 10px; border-radius: 10px; border: 1.6px solid var(--line, #d9d3c7); font: inherit }

/* --------- Tabelas --------- */
.twrap {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 14px;
}
.twrap table { width: 100%; border-collapse: collapse; min-width: 640px }
.twrap th, .twrap td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: .88rem; vertical-align: middle;
}
.twrap th {
  background: var(--paper-warm); font-weight: 700; white-space: nowrap;
  position: sticky; top: 0;
}
.twrap tr:last-child td { border-bottom: 0 }

/* Grelha mensal */
.mtable { min-width: 900px }
.mtable th, .mtable td { padding: 6px 4px; text-align: center; font-size: .78rem }
.mtable th.name, .mtable td.name {
  text-align: left; min-width: 140px; padding-left: 12px;
  position: sticky; left: 0; background: #fff; z-index: 1;
}
.mtable th.name { background: var(--paper-warm) }
.mtable th.wknd, .mtable td.wknd { background: var(--paper-warm) }
.mtable .tot { font-weight: 700 }
.cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: .7rem;
}
.cell.cP { background: var(--pine-tint); color: var(--pine) }
.cell.cA { background: var(--sun-tint); color: #8B5D0F }
.cell.cF { background: var(--brick-tint); color: #7E2E1E }
.cell.cT { background: var(--sky-tint); color: var(--sky) }
.cell.cN { background: transparent; color: var(--ink-soft); opacity: .55 }
.legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--ink-soft); font-size: .82rem; margin-top: 4px;
}

/* Resumo do dia (chips) */
.sum-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.sum-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: .85rem; box-shadow: var(--shadow);
}
.sum-chip .dotc { width: 10px; height: 10px; border-radius: 50%; display: inline-block }
.sum-chip .n { font-weight: 800 }

/* --------- Alertas --------- */
.alert-item {
  display: flex; gap: 12px; padding: 13px 14px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--radius); margin-bottom: 10px;
  border-left: 5px solid var(--sun); box-shadow: var(--shadow);
}
.alert-item.t-atraso { border-left-color: var(--sun) }
.alert-item.t-saida  { border-left-color: var(--sky) }
.alert-item.t-info   { border-left-color: var(--ink-soft) }
.alert-item.unseen   { background: var(--sun-tint) }
.alert-item .ic  { font-size: 1.35rem; line-height: 1.2 }
.alert-item .msg { font-weight: 600 }
.alert-item .meta { color: var(--ink-soft); font-size: .8rem; margin-top: 2px }
.sms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px }
.sms-chip {
  background: var(--paper-warm); border: 1.4px solid var(--line);
  padding: 3px 10px; border-radius: 999px; font-size: .78rem;
}

/* --------- Modais --------- */
.overlay {
  position: fixed; inset: 0; background: rgba(11,58,48,.55);
  z-index: 1000; display: grid; place-items: center;
  padding: 16px; overflow-y: auto;
}
.modal {
  background: var(--paper);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hi);
  padding: 22px; width: 100%; max-width: 560px;
  max-height: 92dvh; overflow-y: auto; position: relative;
}
.modal.wide { max-width: 760px }
.mclose {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: transparent; font-size: 1.2rem;
  cursor: pointer; color: var(--ink-soft); padding: 6px;
}
.mclose:hover { color: var(--brick) }
.mfoot {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
}
.cam-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px }

/* --------- Auth --------- */
.auth { min-height: 100dvh; display: grid; place-content: center; padding: 20px }
.auth-card {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 24px; padding: 30px 26px;
  box-shadow: var(--shadow-hi);
  width: min(430px, 92vw);
}
.brand-lg { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--pine-deep) }
.brand-lg h1 { font-size: 1.5rem }
.brand-lg p { margin: 0; color: var(--ink-soft); font-size: .85rem }
.auth-view h2 { margin-bottom: 2px }
.auth-links { margin-top: 16px; font-size: .9rem; text-align: center; color: var(--ink-soft) }
.auth-links a { font-weight: 600 }

/* --------- Toasts --------- */
#toasts {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 3000; display: flex; flex-direction: column; align-items: center;
  gap: 8px; width: min(480px, 92vw); pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: 12px; box-shadow: var(--shadow-hi);
  font-weight: 500; max-width: 100%;
  animation: toast-in .25s ease-out;
}
.toast.ok, .toast.info { background: var(--pine) }
.toast.warn { background: var(--sun); color: var(--ink) }
.toast.bad  { background: var(--brick) }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* --------- Cartões QR + leitor --------- */
.qr-box { text-align: center; padding: 8px 0 4px }
.qr-img {
  width: 240px; max-width: 82%;
  background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px; margin: 0 auto; display: block;
  image-rendering: pixelated;
}
.qr-name { font-family: 'Bricolage Grotesque', serif; font-weight: 800; font-size: 1.15rem; margin-top: 10px }
.qr-sub  { color: var(--ink-soft); font-size: .85rem }

.qr-kind { display: flex; gap: 8px; margin: 12px 0 }
.qr-kbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1.6px solid var(--line); border-radius: 12px; padding: 10px;
  background: #fff; cursor: pointer; font-weight: 700; margin: 0;
}
.qr-kbtn input { accent-color: var(--pine); margin: 0 }
.qr-kbtn:has(input:checked) { border-color: var(--pine); background: var(--pine-tint) }

.scan-wrap {
  position: relative; background: #0d1512;
  border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3;
}
.scan-wrap video { width: 100%; height: 100%; object-fit: cover }
.scan-flash {
  position: absolute; inset: 0; display: grid; place-items: end center;
  padding: 14px; pointer-events: none; text-align: center;
  color: #fff; font-weight: 800; font-size: 1.02rem;
  opacity: 0; transition: opacity .18s;
}
.scan-flash.ok  { background: rgba(20,88,74,.6);  opacity: 1 }
.scan-flash.bad { background: rgba(196,86,63,.6); opacity: 1 }
.scan-line { padding: 5px 2px; font-size: .88rem; border-bottom: 1px dashed var(--line) }
.scan-line.ok  { color: var(--pine); font-weight: 600 }
.scan-line.bad { color: var(--brick); font-weight: 600 }

/* Área de impressão dos cartões (invisível no ecrã) */
#printArea { display: none }

/* --------- Estado vazio --------- */
.empty { text-align: center; padding: 30px 18px; color: var(--ink-soft) }
.empty .em { font-size: 2.1rem; margin-bottom: 8px }
.empty b { color: var(--ink) }

/* --------- Responsivo --------- */
@media (max-width: 760px) {
  #app { padding: 10px 12px 80px }
  header.top { margin-bottom: 10px }
  .brand p { display: none }
  nav.tabs { top: 4px; padding: 3px }
  .tabbtn { padding: 9px 11px; font-size: .88rem }
  .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px }
  .clock .t { font-size: 1.6rem }
  .twrap table { min-width: 560px }
}

@media (max-width: 480px) {
  body { font-size: 14.5px }
  .grid { grid-template-columns: 1fr }
  .sect-head { flex-direction: column; align-items: stretch }
  .sect-head .acts { justify-content: flex-start }
  .hdr-right { font-size: .8rem; gap: 8px }
  .modal { padding: 16px; border-radius: 16px }
  .contact-row { grid-template-columns: 1fr 1fr; }
  .contact-row .ct-name { grid-column: 1 / 2 }
  .contact-row .rm { justify-self: end }
  .reg-top { flex-direction: column; align-items: flex-start }
  .mfoot .btn { flex: 1 }
}

/* --------- Impressão --------- */
@media print {
  body { background: #fff }
  nav.tabs, header.top, .btn, .sect-head .acts, .app-foot { display: none !important }
  .card, .twrap { break-inside: avoid; box-shadow: none; border: 1px solid #ccc }

  /* Impressão de cartões QR: esconde tudo menos o #printArea */
  body.printing > *:not(#printArea) { display: none !important }
  body.printing #printArea {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8mm;
  }
  body.printing .qr-card {
    border: 1px dashed #999; border-radius: 5mm;
    padding: 7mm; text-align: center; break-inside: avoid;
  }
  body.printing .qr-card img {
    width: 50mm; height: 50mm; margin: 0 auto; display: block;
    image-rendering: pixelated;
  }
  body.printing .qr-card .qr-name { font-weight: 700; font-size: 14pt; margin-top: 3mm }
  body.printing .qr-card .qr-sub  { color: #555; font-size: 9.5pt }
}