:root {
  --bg: #f6f5f1;
  --panel: #ffffff;
  --text: #1a1a18;
  --text-2: #5f5e5a;
  --text-3: #8f8e88;
  --line: rgba(0, 0, 0, .10);
  --line-2: rgba(0, 0, 0, .22);
  --busy-bg: #e6f1fb;
  --busy-fg: #0c447c;
  --free-fg: #3b6d11;
  --now: #d85a30;
  --hi: #a32d2d;
  --lo: #185fa5;
  --ok: #3b6d11;
  --ok-on: #ffffff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0b0b;
  --panel: #141413;
  --text: #f1efe8;
  --text-2: #b4b2a9;
  --text-3: #7c7b75;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .24);
  --busy-bg: #0c2a4a;
  --busy-fg: #b5d4f4;
  --free-fg: #97c459;
  --now: #f0997b;
  --hi: #f09595;
  --lo: #85b7eb;
  --ok: #639922;
  --ok-on: #0b0b0b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
p { margin: 0; }
button { font: inherit; color: inherit; }

#board {
  display: flex;
  height: calc(100% - 36px);
  padding: 12px 12px 0;
  gap: 0;
}
.col {
  min-width: 0;
  flex: 0 0 33%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#c2, #c3 { overflow-y: auto; }

.divider {
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}
.divider span { width: 5px; height: 64px; border-radius: 3px; background: var(--line-2); }
body.locked .divider { cursor: default; }
body.locked .divider span { opacity: .25; }

.lbl {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
}

/* ── Coluna 1 ── */
#c1 { justify-content: space-between; }
#clock {
  display: inline-block;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#date { color: var(--text-2); margin-top: 8px; font-size: clamp(16px, 1.8vw, 26px); }
.weather {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: 14px; font-size: clamp(16px, 1.7vw, 24px);
}
.weather[hidden] { display: none; }
.w-icon { font-size: 1.5em; line-height: 1; }
.w-now { font-size: 1.35em; font-weight: 600; }
.w-range { display: inline-flex; gap: 14px; }
.w-range .hi { color: var(--hi); }
.w-range .lo { color: var(--lo); }
.w-range b { color: var(--text); font-weight: 600; }
.w-rain { color: var(--text-2); }

.status .lbl { margin-top: 18px; }
.big { font-size: clamp(18px, 2vw, 30px); font-weight: 600; line-height: 1.2; }
.sub { font-size: clamp(14px, 1.5vw, 20px); color: var(--text-2); margin-top: 2px; }
.big.free { color: var(--free-fg); }

/* ── Coluna 2 ── */
#allday { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#allday span { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--busy-bg); color: var(--busy-fg); }
#timeline { list-style: none; margin: 0; padding: 0; }
#timeline li {
  display: grid; grid-template-columns: 58px 1fr; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 10px;
  font-size: 16px; position: relative;
}
#timeline .t { font-variant-numeric: tabular-nums; font-weight: 600; }
#timeline .meta { display: block; font-size: 13px; color: var(--text-3); }
#timeline .busy { background: var(--busy-bg); color: var(--busy-fg); border-left: 5px solid var(--cal, var(--busy-fg)); border-radius: 4px 10px 10px 4px; }
#timeline .busy .meta { color: inherit; opacity: .75; }
#timeline .soft { background: transparent; border: 1px solid var(--line-2); border-left: 5px solid var(--cal, var(--line-2)); color: var(--text-2); }
#timeline .free { border: 1px dashed var(--line-2); color: var(--free-fg); }
#timeline .tentative { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(127,127,127,.12) 8px 16px); }
#timeline .past { opacity: .42; }
#timeline .current { outline: 2px solid var(--now); outline-offset: 1px; }
#timeline .empty { color: var(--text-3); }

/* ── Coluna 3 ── */
#tasks-count { text-transform: none; letter-spacing: 0; }
#tasks { list-style: none; margin: 0; padding: 0; }
#tasks li {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 18px; cursor: pointer;
}
#tasks .cb {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 2px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: transparent;
}
#tasks .done .cb { background: var(--ok); border-color: var(--ok); color: var(--ok-on); }
#tasks .done .tt { text-decoration: line-through; color: var(--text-3); }
#tasks .due { display: block; font-size: 13px; color: var(--text-3); }
#tasks .due.late { color: var(--hi); }
#tasks .saving { opacity: .6; }
#tasks .msg { color: var(--text-3); cursor: default; font-size: 15px; }

/* ── Rodapé / toast ── */
#bar {
  height: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 0 16px; font-size: 13px; color: var(--text-3);
}
#bar .warn { color: var(--hi); }
#theme-btn, #kiosk-btn, #lock, #gear, .tog { background: none; border: 0; font-size: 18px; padding: 4px 8px; cursor: pointer; }

/* ── Configurações ── */
#settings {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0, 0, 0, .45);
  display: flex; justify-content: flex-end;
}
#settings[hidden] { display: none; }
#settings .sheet {
  width: min(560px, 100%); height: 100%; overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line);
  padding: 20px 24px 40px;
  -webkit-user-select: text; user-select: text;
}
#settings header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#settings h2 { font-size: 22px; margin: 0; }
#settings h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 24px 0 10px; }
#settings-close { background: none; border: 0; font-size: 22px; cursor: pointer; padding: 6px 10px; }
#settings ul { list-style: none; margin: 0 0 12px; padding: 0; }
#accounts-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px;
}
#accounts-list .tag { font-size: 12px; color: var(--free-fg); margin-left: 8px; }
#accounts-list .err { display: block; font-size: 13px; color: var(--hi); }
.cal-group { margin-bottom: 14px; }
.cal-group p { font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.cal-item { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; cursor: pointer; }
.cal-item input { width: 22px; height: 22px; accent-color: var(--ok); }
.cal-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.grid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.grid select {
  font: inherit; font-size: 16px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 8px; padding: 10px;
}
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: 10px; background: none;
  color: var(--text); text-decoration: none; font-size: 15px; cursor: pointer;
}
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.danger { color: var(--hi); border-color: currentColor; min-height: 36px; font-size: 14px; }
.hint, .muted { font-size: 13px; color: var(--text-3); margin-top: 10px; }
#toast {
  position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  background: var(--text); color: var(--bg);
  padding: 12px 14px 12px 20px; border-radius: 12px; font-size: 16px;
}
#toast[hidden] { display: none; }
#toast button { background: none; border: 1px solid currentColor; border-radius: 8px; padding: 6px 14px; color: inherit; cursor: pointer; }

/* Retrato ou tela estreita: empilha. */
@media (max-width: 760px), (orientation: portrait) {
  body { overflow: auto; }
  #board { flex-direction: column; height: auto; gap: 12px; padding-bottom: 12px; }
  .col { flex: none !important; }
  .divider { display: none; }
}

/* ── Modo quiosque ── */
/* Em tela cheia o rodapé some; 📅 ☑️ ⚙️ ficam empilhados no meio da borda direita,
   numa faixa reservada (o painel encolhe para eles nunca cobrirem conteúdo). */
body.kiosk #bar {
  position: fixed; right: 8px; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 6;
  flex-direction: column; height: auto; padding: 0; background: none;
}
body.kiosk #board { padding-right: 68px; }
body.kiosk #bar > :not(#gear):not(.tog) { display: none; }
body.kiosk #gear, body.kiosk .tog {
  width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line); opacity: .55; font-size: 22px;
}
body.kiosk #board { height: 100%; padding-bottom: 12px; }
#kiosk-exit { position: fixed; top: 0; right: 0; width: 80px; height: 80px; z-index: 5; display: none; }
body.kiosk #kiosk-exit { display: block; }

/* ── Login ── */
#login {
  position: fixed; inset: 0; z-index: 20; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.login-card {
  width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px;
  -webkit-user-select: text; user-select: text;
}
.login-card h2 { margin: 0; font-size: 24px; }
.login-card input {
  font: inherit; font-size: 18px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px;
}
.login-card .btn { justify-content: center; font-size: 17px; }
#login:not([data-mode="signup"]) .only-signup { display: none; }
.login-card .linkish {
  font: inherit; font-size: 15px; color: inherit; opacity: .75; background: none; border: 0;
  padding: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.login-card .linkish[hidden] { display: none; }
.err { color: var(--hi); font-size: 14px; }

/* ── Colunas recolhidas / modo foco ── */
.tog.off { opacity: .35; }
body.kiosk .tog.off { opacity: .3; }

#c1 { position: relative; }
/* Foco: bloco do relógio ocupa o centro; próxima reunião no fluxo (nunca sobrepõe o clima). */
body.focus #c1 { justify-content: space-between; align-items: center; text-align: center; }
body.focus .clock-block { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.focus #date { font-size: clamp(22px, 3.2vw, 46px); margin-top: 14px; }
body.focus .weather { justify-content: center; font-size: clamp(22px, 2.8vw, 42px); gap: 10px 32px; margin-top: 18px; }
body.focus .status {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding-bottom: 8px;
}
body.focus .status > :nth-child(-n+3) { display: none; }
body.focus .status .lbl { margin: 0; }
body.focus .status .big { font-size: clamp(18px, 2vw, 28px); }
body.focus .status .sub { margin: 0; font-size: clamp(16px, 1.7vw, 24px); }
body.focus:not(.focus-next) .status { display: none; }
/* Com fundo temático, o relógio flutua direto sobre a paisagem. */
:root[data-scene]:not([data-scene="none"]) body.focus #c1 { background: transparent; border-color: transparent; }
/* Textos ABAIXO do relógio (data, clima, próxima reunião) seguem o tom real da paisagem
   (data-scene-tone), não o modo claro/escuro. O relógio não é afetado. */
:root[data-scene-tone="dark"]:not([data-scene="none"]) body.focus :is(#date, .weather, .status) {
  --text: #f7f4ee; --text-2: #ece6dc; --text-3: #d6cfc3; --hi: #ff8a80; --lo: #8fc2ff; --free-fg: #9be7a6;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 12px rgba(0, 0, 0, .5);
}
:root[data-scene-tone="light"]:not([data-scene="none"]) body.focus :is(#date, .weather, .status) {
  --text: #17140f; --text-2: #2f2a22; --text-3: #4d463b; --hi: #b3261e; --lo: #1f55c9; --free-fg: #1e6b2e;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55), 0 0 12px rgba(255, 255, 255, .4);
}

/* ── Botões + e formulários ── */
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.add-btn {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text);
  font-size: 24px; line-height: 1; cursor: pointer; letter-spacing: 0;
}
.modal {
  position: fixed; inset: 0; z-index: 15; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-card {
  width: min(560px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px;
  -webkit-user-select: text; user-select: text; text-transform: none; letter-spacing: 0;
}
.modal-card header { display: flex; align-items: center; justify-content: space-between; }
.modal-card h2 { margin: 0; font-size: 22px; }
.modal-card > label, .modal-card .grid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }
.modal-card input[type="text"], .modal-card input[type="date"], .modal-card input[type="time"], .modal-card select, .modal-card textarea {
  font: inherit; font-size: 17px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%;
}
.modal-card textarea { resize: vertical; }
.modal-card .check { margin-top: 0; }
.modal-close { background: none; border: 0; font-size: 20px; cursor: pointer; padding: 6px 10px; }
.modal-actions { justify-content: flex-end; margin-top: 4px; }
.modal-actions .modal-close { border: 1px solid var(--line-2); font-size: 15px; }
.modal-card.allday .ev-time { display: none; }
#tasks .src { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; margin-left: 6px; background: var(--busy-bg); color: var(--busy-fg); vertical-align: 1px; }
.modal-card > label.check { flex-direction: row; align-items: center; gap: 12px; font-size: 16px; color: var(--text); }

.stale-banner {
  display: block; width: 100%; text-align: left; margin: 0 0 8px; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--hi); background: color-mix(in srgb, var(--hi) 12%, transparent);
  color: var(--hi); font-size: 14px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
#tasks .cb.pin { border-color: transparent; color: inherit; font-size: 18px; }

/* ── Tasks: bloco de atrasadas no rodapé da coluna ── */
#c3 { display: flex; flex-direction: column; overflow: hidden; }
#c3 #tasks { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#overdue {
  flex: none; margin-top: 8px; padding-top: 8px; border-top: 2px solid color-mix(in srgb, var(--hi) 45%, transparent);
  display: flex; flex-direction: column; max-height: 50%;
}
#overdue .overdue-head { display: flex; align-items: center; justify-content: space-between; }
#overdue .overdue-head .lbl { color: var(--hi); margin: 0; }
#overdue-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
#overdue.expanded #overdue-list { overflow-y: auto; }
#overdue-list li {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 4px;
  border-bottom: 1px solid var(--line); font-size: 16px; cursor: pointer;
}
#overdue-list .cb {
  flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--hi);
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: transparent;
}
#overdue-list .done .cb { background: var(--ok); border-color: var(--ok); color: var(--ok-on); }
#overdue-list .done .tt { text-decoration: line-through; color: var(--text-3); }
#overdue-list .due { display: block; font-size: 12px; color: var(--hi); }
#overdue-list .src { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; margin-left: 6px; background: var(--busy-bg); color: var(--busy-fg); }
#overdue-list .saving { opacity: .6; }
.link-btn { background: none; border: 0; color: var(--text-2); font-size: 14px; text-decoration: underline; cursor: pointer; padding: 8px 4px; }