:root{
  --bg-deep: #0f1014;
  --bg-soft: #171821;
  --bg-soft-2:#1d1f28;
  --border: #2a2d37;
  --text: #e8e9f1;
  --muted: #a6a8b3;
  --muted-2: #8f92a0;
  --accent: #7c5cff;
  --danger: #ff5c6c;

  --container-max: 1600px;
  --container-pad-x: 32px;
  --container-pad-b: 90px;
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-deep);
}

/* Container */
.container{
  width: min(var(--container-max), 94vw);
  margin: 32px auto 80px;
  padding: 0 var(--container-pad-x) var(--container-pad-b);
  position: relative;
}

/* Logo */
.brand-chip{
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; border-radius: 10px;
  font-weight: 800; letter-spacing: .05em; font-size: 12.5px;
  background: #1a1b22; color: #cfd1db; border: 1px solid var(--border);
}
.brand-text{ letter-spacing: .05em; font-weight: 800; }
.brand-icon{ width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.brand-icon svg{ width: 18px; height: 18px; color: #cfd1db; }

/* Cabeçalho */
.page-head{
  margin-top: 18px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: start;
}
.title{ font-size: 32px; line-height: 1.2; font-weight: 800; margin: 16px 0 6px; }
.subtitle{ color: var(--muted); margin: 0; font-size: 14px; }

/* Pills */
.date-wrap, .date-field, .time-field{ position: relative; }
.date-pill{
  display: inline-flex; align-items: center; gap: 10px;
  background: #171821; border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.date-pill.small{ padding: 10px 12px; width: 100%; justify-content: space-between; }
.date-pill:hover{ background: #1c1d27; border-color: #34384a; }

/* Base para spans de ícone (o SVG vem no styles-icons.css) */
.icon{ width: 18px; height: 18px; display: inline-block; background-size: 18px 18px; background-repeat: no-repeat; background-position: center; }

/* Datepicker */
.datepicker{
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px; display: none; z-index: 30;
}
.datepicker.drop-up{ top: auto; bottom: calc(100% + 8px); }
.datepicker.open{ display: block; }
.dp-head{ display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 4px 4px 10px; }
.dp-title{ text-align: center; font-weight: 700; color: #e0e2ec; text-transform: capitalize; }
.dp-nav{ width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #1b1c25; color: #dfe1ea; cursor: pointer; }
.dp-nav:hover{ background: #202433; }
.dp-week{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 4px 6px; color: var(--muted); font-size: 12px; text-align: center; }
.dp-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 4px 6px; }
.dp-day{ height: 36px; border-radius: 8px; border: 1px solid var(--border); background: #1b1c25; color: #e7e8f0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 600; }
.dp-day:hover{ background: #202433; }
.dp-day.is-other{ color: #8a8c98; }
.dp-day.is-today{ outline: 2px solid rgba(124,92,255,.45); }
.dp-day.is-selected{ background: var(--accent); border-color: transparent; }
.dp-foot{ display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 0; color: var(--muted); font-size: 12px; }

/* Períodos */
.periods{ margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.period-card{ background: #171821; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.period-head{
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 12px 14px; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
  border-bottom: 1px solid var(--border);
}
.period-left{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #dfe1ea; font-size: 15px; }

/* Lista de agendamentos — “centro perfeito” do Serviço */
.appointments{ display: flex; flex-direction: column; padding: 0 10px 10px; }
.appointment{
  display: grid;
  /* Hora | espaço L (1fr) | Serviço | espaço R (1fr) | Remover */
  grid-template-columns: 72px 1fr minmax(140px, max-content) 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--border);
  background: transparent;
}
.appointment:first-child{ border-top: none; }

/* Hora */
.time-text{ font-weight: 800; color: #e7e8f0; letter-spacing: .01em; }

/* Cliente (coluna 2) */
.client-line{
  grid-column: 2; color: #e7e8f0; font-weight: 600; font-size: 15px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.client-line .sep{ color: var(--muted); font-weight: 500; }

/* Serviço (coluna 3) — centralizado geometricamente entre Hora e Remover */
.service-inline{
  grid-column: 3; justify-self: center; text-align: center;
  color: #c9cbd6; opacity: .95;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Remover (coluna 5) */
.remove{
  grid-column: 5;
  background: transparent; border: none; color: #b9bbca; font-weight: 700; font-size: 13.5px;
  cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.remove:hover{ background: rgba(255,255,255,.05); color: #d8d9e3; }

/* FAB */
.fab{
  position: fixed;
  right: calc((100vw - min(var(--container-max), 94vw))/2 + var(--container-pad-x));
  bottom: 24px;
  background: var(--accent); color: #fff; border: none; font-weight: 800; letter-spacing: .02em;
  padding: 12px 16px; font-size: 13px; border-radius: 10px;
  cursor: pointer; transition: transform .04s ease, filter .2s ease, background .2s ease;
}
.fab:hover{ filter: brightness(1.05); }
.fab:active{ transform: translateY(1px); }

/* Timepicker compacto + drop-up */
.timepicker{
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 260px; max-height: 420px; overflow: auto;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px; display: none; z-index: 30;
}
.timepicker.drop-up{ top: auto; bottom: calc(100% + 8px); }
.timepicker.open{ display: block; }
.tp-list{ display: flex; flex-direction: column; gap: 6px; }
.tp-item{
  width: 100%; height: 36px;
  border: 1px solid var(--border); background: #1b1c25; color: #e7e8f0;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: 600; font-size: 13px;
}
.tp-item:hover{ background: #202433; }
.tp-item.selected{ background: var(--accent); border-color: transparent; }
.tp-item.disabled{ opacity: .45; cursor: not-allowed; background: #151620; }

/* Modal */
body.modal-open { overflow: hidden; }
.modal{ position: fixed; inset: 0; display: none; z-index: 1000; }
.modal.open{ display: block; }
.modal-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.modal-dialog{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 14px;
}
.modal-head{ display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-head h2{ margin: 0; font-size: 18px; }
.modal-close{ background: transparent; color: #cfd1db; border: none; font-size: 22px; cursor: pointer; line-height: 1; }

/* Formulário do modal */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 16px 18px 6px; }
.field{ display: flex; flex-direction: column; gap: 6px; }
.field--full{ grid-column: 1 / -1; }
label{ font-size: 13px; color: #dfe1ea; }
input, textarea{
  background: #1b1c25; border: 1px solid var(--border); color: #e8e9f1;
  padding: 10px 12px; border-radius: 10px; font: inherit; outline: none;
}
input:focus, textarea:focus{ border-color: #3a3f54; box-shadow: 0 0 0 2px rgba(124,92,255,.25); }
.error{ min-height: 16px; font-size: 12px; color: var(--danger); }
.field.invalid input, .field.invalid textarea{ border-color: var(--danger); }

/* Barra de ações do modal — Cancelar à esquerda, Agendar à direita */
.modal-foot{
  display: flex;
  align-items: center;
  justify-content: space-between; /* empurra um para cada lado */
  gap: 12px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  background: transparent;
}

/* Botões (reforço dentro e fora do modal) */
.btn{
  border: 1px solid var(--border);
  background: #1b1c25;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}
.btn.ghost:hover{ background: #202433; }
.btn.primary{ background: var(--accent); border-color: transparent; color: #fff; }
.btn.primary:hover{ filter: brightness(1.05); }

/* Evita resets do navegador no contexto do modal */
.modal .btn{
  appearance: none; -webkit-appearance: none; background-clip: padding-box;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: #1b1c25; color: var(--text);
  padding: 10px 14px; border-radius: 10px; font: inherit; font-weight: 700; line-height: 1;
  text-decoration: none;
}
.modal .btn:hover{ background: #202433; }
.modal .btn:focus-visible{ outline: 2px solid rgba(124,92,255,.45); outline-offset: 2px; }
.modal .btn.primary{ background: var(--accent); border-color: transparent; color: #fff; }
.modal .btn.primary:hover{ filter: brightness(1.05); }
.modal .btn.primary::before{ flex: 0 0 16px; }

/* Responsivo */
@media (max-width: 820px){
  .container{ width: min(100%, 96vw); margin: 20px auto 90px; padding: 0 14px 90px; }
  .page-head{ grid-template-columns: 1fr; gap: 10px; }
  .title{ font-size: 24px; margin-top: 10px; }
  .subtitle{ font-size: 13px; }

  .appointments{ padding: 0 6px 8px; }
  .appointment{ grid-template-columns: 64px 1fr auto; }
  .service-inline{ display: none; }
  .remove{ display: none; }

  .form-grid{ grid-template-columns: 1fr; }
  .datepicker, .timepicker{ right: 0; left: auto; }
}