:root {
  --bg: #fdfaf8;
  --bg-2: #f7f0eb;
  --surface: #fffdfa;
  --text: #4a423d;
  --muted: #a39387;
  --line: #ede4de;
  --primary: #a33f4e;
  --primary-dark: #802f3b;
  --primary-soft: #fceef0;
  --ok: #2f8e63;
  --danger: #b42323;
  --fontH: "Cormorant Garamond", serif;
  --fontB: "Karla", sans-serif;
  --radius: 16px;
  --shadow: 0 4px 15px rgba(0,0,0,0.05);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-soft {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

*{box-sizing:border-box; transition: var(--transition); }
button, .month-day, .tab-btn, .service-manage-item { touch-action: manipulation; user-select: none; }
body{margin:0;font-family:var(--fontB);background:radial-gradient(circle at top,#fff,var(--bg) 35%,var(--bg-2));color:var(--text); scroll-behavior: smooth;}
.hidden{display:none!important}
.logo{height:84px;margin:0 auto 8px;display:block}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:min(390px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow: var(--shadow); animation: slideUp 0.5s ease-out;}
.login-card h1{margin:8px 0 4px;text-align:center;font-family:var(--fontH); font-size: 28px;}
.login-card p{margin:0 0 14px;text-align:center;color:var(--muted);font-size:14px}
#login-form input,#login-form > button[type="submit"]{width:100%;border-radius:var(--radius);padding:12px;border:1px solid var(--line)}
#login-form input[type="password"], #login-form input[type="text"] { padding-right: 60px; }
.password-container { position: relative; width: 100%; margin-bottom: 1rem; }

.toggle-pass {
  position: absolute !important; right: 12px; top: 50%; transform: translateY(-50%);
  background: none !important; border: none !important; cursor: pointer; color: var(--muted);
  padding: 0 !important; width: 24px !important; height: 24px !important;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7; transition: opacity 0.2s; margin:0 !important;
}
.toggle-pass:hover { opacity: 1; }
.toggle-pass svg { width: 18px; height: 18px; fill: currentColor; }

.form-hint-text {
  font-size: 11px; color: var(--muted); margin: 4px 0 12px 5px; 
  font-weight: 600; line-height: 1.4; display: block;
}

.back-link-login { position: absolute; top: 20px; left: 20px; text-decoration: none; color: var(--primary); font-size: 11px; font-weight: 700; text-transform: uppercase; z-index: 100; border: 1px solid var(--line); padding: 5px 10px; border-radius: 20px; background: white; }
#admin-password::-ms-reveal { display: none; } /* Esconde o ícone de olho padrão do Edge/IE */
#login-form > button[type="submit"]{margin-top:8px;border:0;background:var(--primary);color:#fff;font-weight:700; cursor: pointer; position: relative;}
#login-form button:active { transform: scale(0.96); background: var(--primary-dark); }

/* Estilo para o botão de login em estado de carregamento */
#login-form button.is-loading {
  background: var(--primary-dark);
  cursor: not-allowed;
  color: transparent; /* Esconde o texto original */
}
#login-form button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.error{color:var(--danger);margin-top:8px;display:block;text-align:center; font-weight: 600; animation: fadeIn 0.3s ease-out;}

.topbar{
  position:sticky; top:0; z-index:100; 
  display:flex; justify-content:space-between; align-items:center; 
  gap:10px; padding:12px 14px; 
  border-bottom:1px solid var(--line); 
  background:#fffaf8eb; 
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.left{display:flex;align-items:center;gap:10px;overflow:hidden}.left a{text-decoration:none;color:var(--primary);font-size:11px;border:1px solid var(--line);padding:5px 10px;border-radius:999px;background:#fff8;white-space:nowrap}
.topbar h2{margin:0;font-family:var(--fontH);font-size:26px}.topbar p{margin:0;color:var(--muted);font-size:12px}
.topbar-actions{display:flex;align-items:center;gap:10px}
.btn-cleanup{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(47,142,99,.18);background:rgba(47,142,99,.08);color:var(--ok);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;white-space:nowrap}

#view-agenda, #view-relatorio { animation: fadeIn 0.4s ease-out; }

/* Estilos para a navegação de abas do admin */
.admin-nav-tabs { 
  display: flex; gap: 5px; background: var(--bg-2); padding: 5px; 
  border-radius: 12px; border: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.admin-nav-tabs::-webkit-scrollbar { display: none; }

.tab-nav-btn { 
  border: 1px solid transparent; background: none; padding: 8px 16px; border-radius: 8px; 
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.tab-nav-btn:hover { color: var(--primary); }
.tab-nav-btn.active { background: var(--surface); color: var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

#logout{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:var(--radius);padding:8px 12px;cursor:pointer}
#logout:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.container{max-width:1220px;margin:0 auto;padding:14px;display:grid;gap:14px}
.container > *, .layout-grid > *, .stats > *, .card { min-width:0; }
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow: var(--shadow); animation: slideUp 0.4s ease-out both;}
.card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); }

@media (max-width: 900px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .topbar .left { justify-content: space-between; min-width:0; }
  .topbar-actions { justify-content: space-between; flex-wrap:wrap; }
  .admin-nav-tabs { width: 100%; }
  .tab-nav-btn { flex: 1; text-align: center; padding: 10px 5px; font-size: 12px; }
  .container { padding: 10px; }
  .card { padding: 15px; }
  .card-head { align-items:flex-start; flex-wrap:wrap; }
  .card-head > div { width:100%; }
  #client-search { width:100% !important; }
  .export-controls { width:100%; flex-wrap:wrap; }
  .export-controls input { flex:1 1 120px; min-width:0; }
  .export-controls button { flex:1 1 100%; }
  .table-wrap { margin: 0 -15px; padding: 0 15px; width: calc(100% + 30px); }
  td { font-size: 14px !important; padding: 12px 6px !important; }
  th { font-size: 10px !important; }
  .price-item-row { align-items:flex-start; gap:10px; flex-direction:column; }
  .price-edit-group { width:100%; justify-content:space-between; flex-wrap:wrap; }
}

.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.card h3{margin:0;font-family:var(--fontH);font-size:24px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow: var(--shadow);}.stat small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.stat strong{display:block;margin-top:4px;font-size:22px;font-family:var(--fontH)}
.alerts-list{display:grid;gap:8px}.alert-item{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 10px;font-size:13px}
.alert-item strong{display:block;margin-bottom:2px}.ghost-btn{border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--muted);padding:6px 10px}
.layout-grid{display:grid;gap:14px}.service-list{display:grid;gap:6px;max-height:460px;overflow:auto;min-height:300px}

.search-wrapper-admin { margin-bottom: 12px; }
.search-input-admin { 
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 15px; 
  font-size: 14px; font-family: var(--fontB); background: #fff; color: var(--text);
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.search-input-admin:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }

.category-tabs { display: flex; gap: 8px; margin-bottom: 15px; }
button, .tab-btn, .service-manage-item, .month-day { cursor: pointer; border: 1px solid var(--line); }
button:active { transform: scale(0.96); }

.tab-btn { 
  flex: 1; padding: 10px; border-radius: var(--radius);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--muted);
}
.tab-btn:hover { background: var(--primary-soft); color: var(--primary); }
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 10px var(--primary-soft); }

/* Melhoria do Botão Voltar do Cliente (se compartilhado) */
.selected-service-chip {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  padding: 12px !important;
  border-radius: var(--radius) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.service-manage-item {
  display: flex; justify-content: space-between; align-items: center; 
  padding: 12px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); 
  box-shadow: 0 2px 4px rgba(0,0,0,0.02); }

@media (hover: hover) {
  .service-manage-item:hover { transform: translateX(5px); border-color: var(--primary); }
  .month-day:hover{border-color:var(--primary); background: var(--primary-soft); transform: scale(1.15); z-index: 2; border-radius: 50%; }
}

.service-manage-item.active { border-color: var(--primary); background: var(--primary-soft); }
.service-manage-item .info { cursor: pointer; flex: 1; font-size: 13px; font-weight: 600; }
.price-edit { display: flex; align-items: center; gap: 4px; }
.price-edit input { width: 70px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; text-align: center; font-weight: bold; }
.agenda-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:10px}.agenda-top p{margin:4px 0 0;color:var(--muted);font-size:12px}
.year-nav{display:flex;align-items:center;gap:8px}.year-nav button{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px}
.year-grid{display:grid;grid-template-columns:1fr;gap:10px;min-height:600px}
.month-box{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}.month-box h4{margin:0 0 8px;font-size:14px}
.month-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.month-day,.month-empty{min-height:34px;border-radius:8px;font-size:11px;display:grid;place-items:center}
.month-day{border:1px solid var(--line);background:#fff;position:relative; transition: var(--transition); }
.month-day.active{border-color:var(--primary);background:var(--primary);color:#fff; transform: scale(1.1); box-shadow: 0 0 15px var(--primary-soft); }
.month-day.has-free::after{content:"";width:5px;height:5px;border-radius:99px;position:absolute;bottom:4px; background:var(--ok); right:7px; transition: none;}
.day-slots{max-height:420px;overflow:auto;display:grid;gap:8px}
.slot{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:#fff; animation: slideUp 0.3s ease-out both;}
.badge{padding:3px 8px;border-radius:999px;font-size:11px}.badge.free{background:#e8f8f0;color:var(--ok)}.badge.busy{background:#ffecec;color:var(--danger)}
.slot-actions{display:flex;align-items:center;gap:6px}.btn-cancel,.btn-delete{border:1px solid var(--line);background:#fff;border-radius:7px;padding:3px 7px}
.add-slot-box{margin-top:10px;display:flex;gap:8px}.add-slot-box input,.add-slot-box button{border-radius:var(--radius);border:1px solid var(--line);padding:10px}
.add-slot-box button{border:0;background:var(--primary);color:#fff}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--line);font-size:13px}th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.05em}

/* Estilos para Botões de Ação na Tabela */
.table-action-group {
  display: flex;
  gap: 6px;
}

.btn-action {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.btn-action:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.btn-action.ghost-green { color: var(--ok); border-color: rgba(47, 142, 99, 0.2); background: rgba(47, 142, 99, 0.05); }
.btn-action.ghost-green:hover { background: var(--ok); color: #fff; }
.btn-action.ghost-red { color: var(--danger); border-color: rgba(180, 35, 35, 0.2); background: rgba(180, 35, 35, 0.05); }
.btn-action.ghost-red:hover { background: var(--danger); color: #fff; }

/* Estilos de Paginação de Clientes */
.client-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 10px; }
.pagination-summary { font-size: 13px; color: var(--muted); }
.pagination-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.page-btn { padding: 6px 12px; border: 1px solid var(--line); background: #fff; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; transition: var(--transition); }
.page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 8px var(--primary-soft); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 600px) { .client-pagination { flex-direction: column; text-align: center; } .pagination-actions { width: 100%; justify-content: center; } }

/* Modal Styles - Corrigindo o Pop-up que sumiu */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(4px);
}
.modal-content {
  background: var(--surface); 
  padding: clamp(15px, 5vw, 30px); 
  border-radius: var(--radius);
  width: min(500px, 92%); max-height: 85vh; overflow-y: auto;
  position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.2); border: 1px solid var(--line);
}

/* Sistema de Notificação Toast */
.notification-container {
  position: fixed; top: 20px; right: 20px; z-index: 10001;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.notification-toast {
  background: var(--surface); border-left: 4px solid var(--ok);
  padding: 16px 20px; border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; gap: 4px;
  animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  min-width: 280px; cursor: pointer; pointer-events: auto;
}
.notification-toast.fade-out { animation: slideOutRight 0.4s ease-in forwards; }
.notification-toast strong { font-family: var(--fontH); font-size: 18px; color: var(--ok); }
.notification-toast span { font-size: 13px; color: var(--text); font-weight: 600; }
.notification-toast small { font-size: 11px; color: var(--muted); }
.notification-toast.error { border-left-color: var(--danger); }
.notification-toast.error strong { color: var(--danger); }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

.close-modal {
  position: absolute; top: 15px; right: 20px; background: none; border: none;
  font-size: 32px; cursor: pointer; color: var(--muted); line-height: 1;
}
.close-modal:hover { color: var(--primary); }

/* Ajustes Mobile para a Topbar e Calendário */
@media (max-width: 480px) {
  .topbar { padding: 12px 10px; }
  .topbar h2 { font-size: 22px; line-height:1; }
  .left a { font-size: 10px; padding: 4px 8px; }
  .topbar p { display: none; } /* Esconde subtitulo no mobile muito pequeno para ganhar espaço */
  .stats { grid-template-columns: 1fr; } /* Stats em coluna única no mobile */
  .month-days { gap: 2px; }
  .month-day { min-height: 40px; font-size: 13px; } /* Botões maiores para toque no mobile */
  .login-card { padding:20px 16px; }
  .back-link-login { top:12px; left:12px; }
  .topbar .left { flex-direction:column; align-items:flex-start; gap:8px; }
  .topbar-actions > * { flex:1; text-align:center; }
  .btn-cleanup { padding:8px 10px; font-size:11px; }
  .modal-content { width:94%; max-height:88vh; }
  .slot { align-items:flex-start; flex-direction:column; gap:8px; }
  .slot-actions { width:100%; flex-wrap:wrap; }
  .slot-actions button { flex:1; }
  .table-action-group { flex-direction:column; align-items:stretch; }
  .btn-action { width:100%; padding:8px 10px; }
  .table-wrap { margin:0; padding:0; width:100%; }
}

.price-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.price-item-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.name-info { display: flex; flex-direction: column; gap: 2px; }
.name-info strong { font-size: 14px; color: var(--text); }
.name-info small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.price-edit-group { display: flex; align-items: center; gap: 8px; }
.price-edit-group input { width: 80px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; text-align: center; color: var(--text); }
.price-edit-group button { background: var(--ok); color: #fff; border: none; padding: 8px 12px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; }
.price-edit-group button:hover { opacity: 0.9; }
.price-edit-group .currency { font-weight: 600; color: var(--muted); font-size: 13px; }

@media (min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.layout-grid{grid-template-columns:280px 1fr}.year-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.year-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:760px){ .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:1100px){ .price-grid { grid-template-columns: repeat(3, 1fr); } }

/* Admin Loading Indicator (Estilo Notificação Discreta) */
#admin-loading {
  position: fixed; bottom: 30px; right: 30px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 12px 20px; border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: 12px;
  z-index: 10000; animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-left: 5px solid var(--primary);
}
#admin-loading.hidden { display: none !important; }
.admin-spinner {
  width: 22px; height: 22px; border: 3px solid var(--line);
  border-top: 3px solid var(--primary); border-radius: 50%;
  animation: spin-admin 1s linear infinite;
}
@keyframes spin-admin { to { transform: rotate(360deg); } }
#admin-loading p { font-family: var(--fontB); font-size: 14px; color: var(--text); margin: 0; font-weight: 700; }