:root{
  /* Paleta Dark (Google-like) */
  --bg: #0b0f14;
  --surface: #0f141a;
  --surface-2: #121922;
  --text: #e8eaed;
  --text-secondary: #c5c9ce;
  --muted: #9aa0a6;
  --line: #2a2f37;
  --border-light: #2a2f37;

  --primary: #8ab4f8;
  --primary-hover: #7aa6f6;
  --btn-bg-hover: #151c25;
  --btn-bg-active: #162336;

  /* Shadows (sutis no dark) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.6);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);

  /* Timeline */
  --hour-height: 48px;
  --hour-col-width: 64px;
  --grid-gap: 0px;

  /* Eventos */
  --event-radius: 6px;

  /* Informe aos browsers que o site é dark (inputs/scrollbars nativos) */
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html, body{
  margin:0;
  font-family:"Google Sans","Roboto",system-ui,-apple-system,Segoe UI,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:var(--text);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ====== Links/seleção/focus ====== */
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
::selection{ background:#1d3a66; color:#eaf2ff; }
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ====== Scrollbars (webkit) ====== */
*::-webkit-scrollbar{ width:12px; height:12px; }
*::-webkit-scrollbar-track{ background:#0d1218; }
*::-webkit-scrollbar-thumb{ background:#2a2f37; border:3px solid #0d1218; border-radius:12px; }
*::-webkit-scrollbar-thumb:hover{ background:#343b46; }

/* ====== TOPBAR ====== */
.topbar{
  width:100%; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border-light);
  box-shadow:var(--shadow-sm);
}
.brand{ font-weight:700; color:var(--text); }
.auth{ display:flex; gap:8px; align-items:center; }
.cal-select{
  color:var(--text);
  border:1px solid var(--border-light);
  background:var(--surface);
  padding:8px 12px;
  border-radius:24px;
  min-width:220px;
  appearance:none;
}
.cal-select:focus{ outline:2px solid var(--primary); outline-offset:2px; }
.cal-select option{
  background:var(--surface);
  color:var(--text);
}

/* ====== BOTÕES ====== */
.btn{
  border:1px solid var(--border-light);
  background:var(--surface);
  color:var(--text);
  padding:8px 16px;
  border-radius:24px;
  cursor:pointer;
  transition:all .2s ease;
  font-weight:500;
}
.btn:hover{ background:var(--btn-bg-hover); box-shadow:var(--shadow-sm); }
.btn:active{ background:var(--btn-bg-active); transform:translateY(1px); }
.btn.primary{
  border-color:#2e4360;
  color:#0b1117;
  background:var(--primary);
}
.btn.primary:hover{ background:var(--primary-hover); }

/* ====== CONTAINER ====== */
.calendar-container{
  max-width:100%;
  margin:0 auto;
  padding:24px;
  background:var(--surface);
  min-height:calc(100vh - 64px);
}

/* ====== HEADER ====== */
.calendar-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px; width:100%;
}
.calendar-title{
  font-size:22px; font-weight:400; text-align:center; color:var(--text);
}
.calendar-header .nav-group{ display:flex; align-items:center; gap:12px; }
.calendar-nav-btn{
  border:1px solid var(--border-light);
  background:var(--surface-2);
  color:var(--text);
  width:40px; height:40px;
  border-radius:50%;
  cursor:pointer; font-size:18px; transition:all .2s ease;
}
.calendar-nav-btn:hover{ background:var(--btn-bg-hover); box-shadow:var(--shadow-sm); }
.calendar-nav-btn:active{ background:var(--btn-bg-active); transform:translateY(1px); }

.view-switcher{
  display:flex; gap:0;
  border:1px solid var(--border-light);
  border-radius:24px; overflow:hidden; background:var(--surface-2);
}
.view-btn{
  border:none; background:transparent; color:var(--text);
  padding:8px 16px; cursor:pointer; font-size:14px; font-weight:500; transition:all .2s ease;
}
.view-btn:hover{ background:var(--btn-bg-hover); }
.view-btn.active{ background:var(--btn-bg-active); color:var(--primary); }

/* ====== EMPTY ====== */
.no-events{ text-align:center; color:var(--muted); padding:24px 0; }

/* ====== DIA (TIMELINE) ====== */
.timeline-day{ display:flex; flex-direction:column; gap:10px; }

/* Dia todo */
.allday-row{
  display:grid; grid-template-columns:var(--hour-col-width) 1fr; gap:var(--grid-gap);
  padding:8px 0 12px; border-bottom:1px solid var(--border-light);
}
.allday-label{
  font-size:12px; color:var(--muted);
  display:flex; align-items:center; justify-content:flex-end; padding-right:8px;
}
.allday-events{ display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }

/* Chips “Dia todo” */
.appointment-item{
  --tech-color:#6b7280;
  margin:4px 0; padding:6px 10px; border-radius:16px;
  background:var(--tech-color); color:#fff; border:none; cursor:pointer; display:inline-block;
  font-size:.88rem; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.appointment-item:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:var(--shadow-md); }

/* Scroller */
.timeline-scroller{
  height:660px; overflow:auto;
  border:1px solid var(--border-light);
  border-radius:12px; background:var(--surface-2);
}
.timeline-scroller.lock-scroll{ overflow:hidden; }
body.dragging-doc{ user-select:none; cursor:grabbing; }

.timeline-wrap{
  display:grid; grid-template-columns:var(--hour-col-width) 1fr;
  gap:var(--grid-gap); padding:8px 0;
}

/* Régua */
.timeline-hours{
  user-select:none; border-right:1px solid var(--border-light); padding-right:8px;
}
.timeline-hour{
  position:relative; height:var(--hour-height);
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding-top:2px; padding-right:8px; color:var(--muted); font-size:12px;
}
.timeline-hour span{ position:absolute; top:-6px; right:8px; }

/* Grade */
.timeline-grid{
  position:relative; height:calc(24 * var(--hour-height));
  background:linear-gradient(to bottom, rgba(255,255,255,0.01), rgba(0,0,0,0.04));
}
.timeline-grid::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(42,47,55,.9) 0 1px, transparent 1px var(--hour-height));
  pointer-events:none;
}

/* Agora */
.now-line{ position:absolute; left:0; right:0; height:2px; background:#ea4335; z-index:100; }
.now-line::before{
  content:""; position:absolute; left:-5px; top:50%;
  width:10px; height:10px; background:#ea4335; border-radius:50%; transform:translateY(-50%);
}

/* Blocos de evento */
.event-block{
  position:absolute; border-radius:var(--event-radius);
  background:var(--tech-color); border-left:3px solid; box-shadow:var(--shadow-sm);
  padding:4px 8px; cursor:grab; overflow:hidden; user-select:none; color:#202124;
  transition:box-shadow .15s ease, transform .15s ease;
}
.event-block:hover{ box-shadow:var(--shadow-md); }
.event-block:active{ cursor:grabbing; }
.event-block.dragging{ opacity:.98; filter:saturate(1.05); box-shadow:var(--shadow-md); }

/* Colisão (visual) */
.event-block.collision{
  outline:2px dashed #ff4d4f; outline-offset:-2px;
  animation:collide 600ms ease-in-out infinite; z-index:300;
}
.event-block.collision-peer{ filter:brightness(.95) saturate(.95); }
@keyframes collide{
  0%{ transform:scale(1) }
  50%{ transform:scale(1.02) }
  100%{ transform:scale(1) }
}

.event-title{ font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-resize{
  position:absolute; left:8px; right:8px; bottom:3px; height:6px; border-radius:3px;
  background:rgba(0,0,0,.18); cursor:ns-resize;
}

/* ====== SEMANA ====== */
.week-view{ display:flex; flex-direction:column; gap:10px; }
.week-header{
  display:grid; grid-template-columns:var(--hour-col-width) repeat(7,1fr);
  gap:var(--grid-gap); align-items:end;
}
.week-day-header{
  text-align:center; padding:8px 0; border:1px solid var(--border-light);
  border-radius:10px; background:var(--surface-2); font-weight:600; color:var(--text);
}
.week-day-header.today{ outline:2px solid var(--primary); outline-offset:1px; background:#0f223d; }

.week-grid{ display:grid; grid-template-columns:var(--hour-col-width) repeat(7,1fr); gap:var(--grid-gap); }
.week-hour-label{
  font-size:12px; color:var(--muted);
  display:flex; align-items:center; justify-content:flex-end; padding-right:8px; height:32px;
}
.week-day-cell{
  border:1px dashed var(--border-light); min-height:32px; border-radius:10px; padding:4px; background:var(--surface-2);
}
.week-day-cell.today{ background:#0e1926; }

/* ====== MÊS ====== */
.month-view{}
.calendar-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--grid-gap); margin-bottom:6px; }
.weekday{ text-align:center; font-weight:600; color:var(--muted); }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--grid-gap); }
.calendar-day{
  min-height:120px; border:1px solid var(--border-light); border-radius:10px; padding:6px;
  background:var(--surface-2); position:relative;
}
.calendar-day.other-month{ background:#0e141c; color:#8190a5; }
.calendar-day.today{ outline:2px solid var(--primary); outline-offset:1px; }
.day-number{ position:absolute; top:6px; right:8px; font-size:12px; color:var(--muted); }


.btnDash{
  background-color: #eff1f5;
}

/* ====== MODAL ====== */
#appointmentModal{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index:9999; animation:fadeIn .18s ease;
}
.modal-card{
  width:min(720px, calc(100vw - 40px));
  background:var(--surface-2); color:var(--text);
  border-radius:8px; border:1px solid var(--border-light); overflow:hidden; box-shadow:var(--shadow-md); animation:slideUp .22s ease;
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border-light); background:var(--surface);
}
.modal-close{
  border:none; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-light);
  border-radius:50%; width:32px; height:32px; cursor:pointer; transition:all .2s ease;
}
.modal-close:hover{ background:var(--btn-bg-hover); box-shadow:var(--shadow-sm); }
.modal-content{ padding:14px; font-size:14px; line-height:1.45; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{ transform:translateY(8px); opacity:.96 } to{ transform:translateY(0); opacity:1 } }

/* ====== RESPONSIVO ====== */
@media (max-width:900px){
  :root{ --hour-col-width:76px; }
  .calendar-title{ font-size:20px; }
}
@media (max-width:720px){
  :root{ --hour-col-width:64px; }
  .cal-select{ min-width:160px; }
}