/* HorAÍ SaaS - Design System v0.1 Stylesheet */
@import url('/horai-tokens.css?v=1.0');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
  background-color: var(--bg, #F5F8FC);
  color: var(--text, #1A2332);
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Accessible Focus Ring: 3px solid with 2px offset (WCAG AA) */
:focus-visible {
  outline: 3px solid var(--focus, #1E4F8A) !important;
  outline-offset: 2px !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg, #F5F8FC);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Transitions */
.tab-content {
  animation: fadeIn 0.25s ease-out;
}

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

/* ==========================================================================
   HORAÍ BUTTON SYSTEM & STATES (44px min touch target, 10px radius)
   ========================================================================== */
.btn {
  min-height: var(--hit, 44px);
  padding: 0 var(--s4, 16px);
  border-radius: var(--r-md, 10px);
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.b1,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--hit, 44px);
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-md, 10px);
  font-weight: 700;
  font-size: var(--fs-sm, 14px);
  background-color: var(--primary, #1E4F8A);
  color: var(--on-primary, #FFFFFF);
  border: 1.5px solid transparent;
  box-shadow: var(--sh1, 0 1px 2px rgba(15, 42, 74, 0.06));
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}
.b1:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: var(--sh2, 0 8px 24px rgba(15, 42, 74, 0.08));
}
.b1:active:not(:disabled),
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.b1:disabled,
.btn-primary:disabled {
  background-color: var(--border, #E3EAF2) !important;
  color: var(--text-2, #5F7189) !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 0.65;
  transform: none;
}

/* Botão Secundário / Outline */
.b2,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--hit, 44px);
  padding: 0.5rem 1rem;
  border-radius: var(--r-md, 10px);
  font-weight: 600;
  font-size: var(--fs-sm, 14px);
  background-color: transparent;
  color: var(--primary, #1E4F8A);
  border: 1.5px solid var(--primary, #1E4F8A);
  box-shadow: var(--sh1, 0 1px 2px rgba(15, 42, 74, 0.06));
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}
.b2:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  background-color: var(--primary-soft, #EAF2FB);
}
.b2:disabled,
.btn-secondary:disabled {
  background-color: var(--border, #E3EAF2) !important;
  color: var(--text-2, #5F7189) !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 0.65;
}

/* Botão de Destaque Secundário Dourado (Regra: SEMPRE com texto Azul Noite #0F2A4A, ratio 5.62:1) */
.b3,
.btn-accent,
.btn-ouro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--hit, 44px);
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-md, 10px);
  font-weight: 800;
  font-size: var(--fs-sm, 14px);
  background-color: var(--accent, #C99A2E);
  color: var(--on-accent, #0F2A4A) !important;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 6px rgba(201, 154, 46, 0.25);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}
.b3:hover:not(:disabled),
.btn-accent:hover:not(:disabled),
.btn-ouro:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(201, 154, 46, 0.35);
}
.b3:active:not(:disabled),
.btn-accent:active:not(:disabled),
.btn-ouro:active:not(:disabled) {
  transform: translateY(0);
}
.b3:disabled,
.btn-accent:disabled,
.btn-ouro:disabled {
  background-color: var(--border, #E3EAF2) !important;
  color: var(--text-2, #5F7189) !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 0.65;
}

/* Botão Destrutivo / Danger */
.b4,
.btn-danger,
.btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--hit, 44px);
  padding: 0.5rem 1rem;
  border-radius: var(--r-md, 10px);
  font-weight: 700;
  font-size: var(--fs-sm, 14px);
  background-color: var(--err-solid, #B93A32);
  color: #FFFFFF;
  border: 1.5px solid transparent;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.b4:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-destructive:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* Botão Ghost / Terciário */
.bg,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--hit, 44px);
  padding: 0.5rem 1rem;
  border-radius: var(--r-md, 10px);
  font-weight: 600;
  font-size: var(--fs-sm, 14px);
  background-color: transparent;
  color: var(--primary, #1E4F8A);
  border: 1.5px solid transparent;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.bg:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
  background-color: var(--primary-soft, #EAF2FB);
}

.btn[disabled],
.btn:disabled {
  background-color: var(--border, #E3EAF2) !important;
  color: var(--text-2, #5F7189) !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 0.65;
}

/* ==========================================================================
   HORAÍ STATUS BADGES (ICON + TEXT WITH SEMANTIC TOKENS)
   ========================================================================== */
.badge-CONFIRMADO {
  background-color: var(--ok-bg, #E3F3EB) !important;
  color: var(--ok-fg, #1A6B4A) !important;
  border: 1px solid rgba(26, 107, 74, 0.25) !important;
}

.badge-PENDENTE {
  background-color: var(--warn-bg, #FFF1D6) !important;
  color: var(--warn-fg, #8A5000) !important;
  border: 1px solid rgba(138, 80, 0, 0.25) !important;
}

.badge-CANCELADO {
  background-color: var(--err-bg, #FBE7E5) !important;
  color: var(--err-fg, #A5322B) !important;
  border: 1px solid rgba(165, 50, 43, 0.25) !important;
}

.badge-EM_ANDAMENTO {
  background-color: var(--primary-soft, #EAF2FB) !important;
  color: var(--primary, #1E4F8A) !important;
  border: 1px solid rgba(30, 79, 138, 0.25) !important;
}

.badge-CONCLUIDO {
  background-color: #E6F7F0 !important;
  color: #12593E !important;
  border: 1px solid rgba(18, 89, 62, 0.25) !important;
}

.badge-FALTOU {
  background-color: var(--neu-bg, #E3EAF2) !important;
  color: var(--neu-fg, #3A485C) !important;
  border: 1px solid rgba(58, 72, 92, 0.25) !important;
}

/* Dark Mode Badges */
.dark .badge-CONFIRMADO {
  background-color: #163A63 !important;
  color: #7FD6AE !important;
  border-color: rgba(127, 214, 174, 0.3) !important;
}
.dark .badge-PENDENTE {
  background-color: #163A63 !important;
  color: #F2BC6B !important;
  border-color: rgba(242, 188, 107, 0.3) !important;
}
.dark .badge-CANCELADO {
  background-color: #163A63 !important;
  color: #FFA39B !important;
  border-color: rgba(255, 163, 155, 0.3) !important;
}
.dark .badge-EM_ANDAMENTO {
  background-color: #163A63 !important;
  color: #8DB8E4 !important;
  border-color: rgba(141, 184, 228, 0.3) !important;
}
.dark .badge-CONCLUIDO {
  background-color: #12392B !important;
  color: #7FD6AE !important;
  border-color: rgba(127, 214, 174, 0.3) !important;
}
.dark .badge-FALTOU {
  background-color: #163A63 !important;
  color: #B9C6D6 !important;
  border-color: rgba(185, 198, 214, 0.3) !important;
}

/* Card HorAÍ (raio de 12px e sombras mínimas) */
.card-horai {
  background-color: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E3EAF2);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--sh1, 0 1px 2px rgba(15, 42, 74, 0.06));
}
.dark .card-horai {
  background-color: var(--surface, #0F2A4A);
  border-color: var(--border, #24476D);
}

/* Modal backdrop */
.modal-backdrop {
  backdrop-filter: blur(4px);
  background-color: rgba(15, 42, 74, 0.65);
}

/* Google Agenda Styles & Density Support */
.density-compact {
  --cal-hour-height: 52px;
  --cal-quarter-height: 13px;
}

.density-padrao {
  --cal-hour-height: 68px;
  --cal-quarter-height: 17px;
}

.density-amplo {
  --cal-hour-height: 84px;
  --cal-quarter-height: 21px;
}

.calendar-grid-container {
  max-height: calc(100vh - 190px);
  min-height: 480px;
  overscroll-behavior-y: auto;
}

.calendar-time-axis {
  width: 54px;
  flex-shrink: 0;
  min-height: 100%;
}

.calendar-time-slot {
  height: var(--cal-hour-height, 52px);
  box-sizing: border-box;
}

.calendar-hour-cell {
  height: var(--cal-hour-height, 52px);
  position: relative;
  box-sizing: border-box;
}

.calendar-hour-cell::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid #f1f5f9;
}

.calendar-hour-cell:not(.is-blocked) {
  cursor: pointer;
}

.calendar-hour-cell:not(.is-blocked):hover {
  background-color: rgba(30, 79, 138, 0.03);
}

.calendar-hour-cell .border-slate-100 {
  border-color: #f1f5f9;
}

.calendar-hour-cell .border-slate-200\/80 {
  border-color: #e2e8f0;
}

.drag-target-indicator,
.drop-target-quarter {
  position: absolute;
  left: 2px;
  right: 2px;
  height: var(--cal-quarter-height, 13px);
  pointer-events: none;
  z-index: 30;
  box-sizing: border-box;
  transition: top 0.05s ease-out;
}

/* Metric Chip Pills (Compact 1-row filters) */
.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.65rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  user-select: none;
}

.metric-chip:hover {
  transform: translateY(-1px);
}

.metric-chip.is-active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.is-dragging-appointment {
  user-select: none !important;
  cursor: grabbing !important;
}

body.is-dragging-appointment * {
  cursor: grabbing !important;
}

.calendar-hour-cell .slot-add-indicator {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
  pointer-events: none;
  z-index: 5;
}

.calendar-hour-cell:not(.is-blocked):hover .slot-add-indicator {
  opacity: 1;
  transform: scale(1);
}

.calendar-hour-cell.is-blocked {
  background-color: #e2e8f0;
  background-image: repeating-linear-gradient(45deg, #cbd5e1 0, #cbd5e1 2px, transparent 0, transparent 8px);
  opacity: 0.85;
  cursor: not-allowed !important;
}

.calendar-hour-cell.is-blocked:hover {
  background-color: #cbd5e1;
}

.calendar-event-card {
  position: absolute;
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: all 0.15s ease;
  overflow: hidden;
  z-index: 10;
  word-break: break-word;
  white-space: normal;
  box-sizing: border-box;
}

.calendar-event-card:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 30;
}

.slot-add-more-btn {
  border-width: 1.5px;
  box-sizing: border-box;
}

.slot-add-more-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(30, 79, 138, 0.2);
}

.calendar-now-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--hz-ouro, #C99A2E);
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(201, 154, 46, 0.45);
}

.calendar-now-indicator::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  background-color: var(--hz-ouro, #C99A2E);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(201, 154, 46, 0.55);
}

.calendar-now-indicator::after {
  content: 'Agora';
  position: absolute;
  right: 8px;
  top: -14px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--hz-ouro-texto, #8A6414);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dark .calendar-now-indicator::after {
  color: var(--hz-ouro, #C99A2E);
}

/* ========================================================================== */
/* DARK MODE OVERRIDES */
/* ========================================================================== */
html.dark {
  background-color: var(--bg, #0B1D33) !important;
  color-scheme: dark;
}

html.dark body {
  background-color: var(--bg, #0B1D33) !important;
  color: var(--text, #F5F8FC) !important;
}

html.dark header {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .bg-white {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

html.dark .bg-slate-50 {
  background-color: #0f172a !important;
}

html.dark .bg-slate-50\/40,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80 {
  background-color: #1e293b !important;
}

html.dark .bg-slate-100 {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

html.dark .bg-slate-100\/60,
html.dark .bg-slate-100\/80 {
  background-color: rgba(51, 65, 85, 0.6) !important;
}

html.dark .calendar-time-axis,
html.dark #calendarTimeLabels,
html.dark .calendar-time-slot {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html.dark #calendarDaysHeader {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
  border-color: #334155 !important;
}

html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #f8fafc !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #94a3b8 !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
  background-color: #1e293b !important;
  opacity: 0.6;
}

html.dark .calendar-hour-cell::after {
  border-bottom-color: #334155 !important;
}

html.dark .calendar-hour-cell .border-slate-100 {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark .calendar-hour-cell .border-slate-200\/80 {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html.dark .calendar-hour-cell:not(.is-blocked):hover {
  background-color: rgba(30, 79, 138, 0.12) !important;
}

html.dark .calendar-hour-cell.is-blocked {
  background-color: #1e293b !important;
  background-image: repeating-linear-gradient(45deg, #334155 0, #334155 2px, transparent 0, transparent 8px) !important;
  opacity: 0.75 !important;
}

html.dark .calendar-hour-cell.is-blocked:hover {
  background-color: #334155 !important;
}

html.dark .slot-add-more-btn {
  background-color: #1e293b !important;
  border-color: var(--primary) !important;
  color: #818cf8 !important;
}

html.dark .slot-add-more-btn:hover {
  background-color: #312e81 !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

html.dark .hover\:bg-slate-50:hover {
  background-color: #334155 !important;
}

html.dark .hover\:bg-slate-100:hover {
  background-color: #334155 !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #334155 !important;
}

html.dark .border-rose-200 {
  border-color: rgba(244, 63, 94, 0.3) !important;
}

html.dark .hover\:bg-rose-50:hover {
  background-color: rgba(244, 63, 94, 0.15) !important;
}

html.dark .text-rose-600 {
  color: #fb7185 !important;
}

/* ========================================================================== */
/* MODERN SAAS ENHANCEMENTS & DESIGN SYSTEM */
/* ========================================================================== */

/* Shimmer / Skeleton Loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

html.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* Card Hover Elevation */
.card-hover {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

html.dark .card-hover:hover {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/* WhatsApp Smartphone Simulator */
.phone-mockup {
  width: 280px;
  height: 520px;
  background-color: #111827;
  border: 10px solid #1e293b;
  border-radius: 40px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.phone-notch {
  width: 110px;
  height: 18px;
  background-color: #1e293b;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin: 0 auto;
  position: relative;
  z-index: 20;
}

.phone-screen {
  flex: 1;
  background-color: #efeae2;
  background-image: radial-gradient(#d1d7db 1px, transparent 1px);
  background-size: 14px 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

html.dark .phone-screen {
  background-color: #0b141a;
  background-image: radial-gradient(#1f2c34 1px, transparent 1px);
}

.phone-header {
  background-color: #075e54;
  color: white;
  padding: 10px 12px 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.whatsapp-bubble {
  background-color: #ffffff;
  border-radius: 12px 12px 12px 2px;
  padding: 10px 12px;
  max-width: 88%;
  font-size: 11.5px;
  line-height: 1.4;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  margin-bottom: 8px;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
}

.whatsapp-bubble.outbound {
  background-color: #d9fdd3;
  border-radius: 12px 12px 2px 12px;
  align-self: flex-end;
}

html.dark .whatsapp-bubble.outbound {
  background-color: #005c4b;
  color: #e9edef;
}

/* Nav Subheadings */
.sidebar-section-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 8px 12px 4px 12px;
}

html.dark .sidebar-section-title {
  color: #64748b;
}

/* Collapsed Mini Sidebar mode */
body.sidebar-collapsed #sidebarGestor {
  width: 68px !important;
  min-width: 68px !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  overflow: hidden !important;
}

body.sidebar-collapsed #sidebarGestor .nav-item {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.sidebar-collapsed #sidebarGestor .nav-item span,
body.sidebar-collapsed #sidebarGestor .sidebar-section-title,
body.sidebar-collapsed #sidebarGestor .tenant-card-content,
body.sidebar-collapsed #sidebarGestor .sidebar-footer,
body.sidebar-collapsed #sidebarGestor .sidebar-watermark-text {
  display: none !important;
}

body.sidebar-collapsed #sidebarGestor .tenant-card-mini {
  display: flex !important;
}

body.sidebar-collapsed #sidebarGestor .mt-8 {
  margin-top: 1rem !important;
  padding: 0.5rem 0.25rem !important;
}

/* Slide-over Panel (Drawer) */
.slide-over-backdrop {
  background-color: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease-out;
}

.slide-over-panel {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Segmented Control Pill */
.segmented-btn.active {
  background-color: #ffffff;
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

html.dark .segmented-btn.active {
  background-color: #1e293b;
  color: #818cf8;
}

/* Hover Quick Card in Calendar */
.appointment-quick-popover {
  position: absolute;
  z-index: 50;
  min-width: 240px;
  max-width: 320px;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 15px 30px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  border: 1px solid #e2e8f0;
  pointer-events: auto;
  animation: popoverFadeIn 0.15s ease-out;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

html.dark .appointment-quick-popover {
  background-color: #1e293b;
  border-color: #334155;
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.5);
}

/* ========================================================================== */
/* KANBAN BOARD */
/* ========================================================================== */
.kanban-column {
  min-height: 480px;
  background-color: #f8fafc;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}

html.dark .kanban-column {
  background-color: #1e293b/60;
  border-color: #334155;
}

.kanban-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none !important;
  user-drag: none !important;
  touch-action: pan-y;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

html.dark .kanban-card {
  background-color: #1e293b;
  border-color: #334155;
}

html.dark .kanban-card:hover {
  border-color: #475569;
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3);
}

.kanban-column.kanban-drop-hover {
  outline: 2px dashed var(--primary) !important;
  outline-offset: -2px;
  background-color: rgba(238, 242, 255, 0.7) !important;
}

html.dark .kanban-column.kanban-drop-hover {
  outline: 2px dashed #818cf8 !important;
  background-color: rgba(30, 27, 75, 0.4) !important;
}

body.kanban-dragging-active,
body.is-dragging-appointment {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}

#floatingKanbanDragCard,
#floatingDragCard {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  transition: none !important;
  animation: none !important;
  will-change: transform, left, top;
}

/* ========================================================================== */
/* COMMAND PALETTE (CTRL + K) */
/* ========================================================================== */
.command-palette-backdrop {
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
}

.command-palette-card {
  max-height: 80vh;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  animation: commandFadeIn 0.15s ease-out;
}

@keyframes commandFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.command-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.command-item:hover,
.command-item.selected {
  background-color: #f1f5f9;
}

html.dark .command-item:hover,
html.dark .command-item.selected {
  background-color: #334155;
}

/* ========================================================================== */
/* MINI CALENDAR / MONTH PICKER */
/* ========================================================================== */
.mini-cal-day {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
}

.mini-cal-day:hover {
  background-color: #e0e7ff;
  color: #4338ca;
}

.mini-cal-day.active {
  background-color: var(--primary);
  color: #ffffff !important;
}

.mini-cal-day.today {
  border: 1.5px solid var(--primary);
  font-weight: 800;
}

.mini-cal-day.has-events::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--primary);
}

.mini-cal-day.active.has-events::after {
  background-color: #ffffff;
}

/* ========================================================================== */
/* PRINT STYLES FOR FINANCIAL REPORTS (PDF / A4) */
/* ========================================================================== */
@media print {
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  header,
  aside,
  #sidebarGestor,
  #sidebarGestorMobile,
  #sidebarBackdrop,
  #superAdminOperatingBanner,
  button,
  .no-print {
    display: none !important;
  }

  main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #tab-relatorios {
    display: block !important;
  }

  .print-header {
    display: block !important;
    margin-bottom: 24px;
    border-bottom: 2px solid #000000;
    padding-bottom: 12px;
  }

  .print-header h1 {
    font-size: 20pt;
    font-weight: bold;
  }

  .shadow-sm,
  .shadow-xs,
  .shadow-md {
    box-shadow: none !important;
  }

  .border,
  .border-slate-200 {
    border-color: #cccccc !important;
  }
}

/* ========================================================================== */
/* CARD STACK EFFECT (MULTI-PARTICIPANT / GROUP APPOINTMENTS) */
/* ========================================================================== */
.card-stack {
  position: absolute !important;
  box-shadow:
    0 0 0 1.5px rgba(30, 79, 138, 0.45),
    3px 3px 0 0 #ffffff,
    3px 3px 0 1.5px rgba(30, 79, 138, 0.5),
    6px 6px 0 0 #ffffff,
    6px 6px 0 1.5px rgba(30, 79, 138, 0.35),
    0 6px 14px -2px rgba(0, 0, 0, 0.12) !important;
}

html.dark .card-stack {
  box-shadow:
    0 0 0 1.5px rgba(129, 140, 248, 0.5),
    3px 3px 0 0 #1e293b,
    3px 3px 0 1.5px rgba(129, 140, 248, 0.45),
    6px 6px 0 0 #1e293b,
    6px 6px 0 1.5px rgba(129, 140, 248, 0.3),
    0 6px 14px -2px rgba(0, 0, 0, 0.4) !important;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack > * {
  margin-left: -6px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.avatar-stack > *:first-child {
  margin-left: 0;
}

.avatar-stack-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

html.dark .avatar-stack > * {
  border-color: #1e293b;
}

/* ========================================================================== */
/* AGENDA LIVE SPOTLIGHT (QUICK SEARCH IN CALENDAR) */
/* ========================================================================== */
.card-spotlight-dimmed {
  opacity: 0.15 !important;
  filter: grayscale(85%);
  pointer-events: none;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.card-spotlight-highlight {
  opacity: 1 !important;
  transform: scale(1.03);
  z-index: 35 !important;
  box-shadow: 0 0 0 3px var(--primary), 0 10px 25px -5px rgba(30, 79, 138, 0.4) !important;
  animation: spotlightPulse 1.8s infinite alternate ease-in-out;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@keyframes spotlightPulse {
  0% { box-shadow: 0 0 0 2px var(--primary), 0 8px 16px -4px rgba(30, 79, 138, 0.3); }
  100% { box-shadow: 0 0 0 4px #818cf8, 0 12px 28px -2px rgba(30, 79, 138, 0.5); }
}

/* ========================================================================== */
/* BULK ACTIONS FLOATING DOCK (ATENDIMENTOS TABLE) */
/* ========================================================================== */
.bulk-actions-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  background-color: #0f172a;
  color: #ffffff;
  border-radius: 20px;
  padding: 10px 18px;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: bulkSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bulkSlideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ========================================================================== */
/* TODAY'S LIVE PULSE STRIP */
/* ========================================================================== */
.today-pulse-bar {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  transition: all 0.2s ease;
}

html.dark .today-pulse-bar {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
}

/* ========================================================================== */
/* CLIENT SMART AUTOCOMPLETE DROPDOWN */
/* ========================================================================== */
.client-autocomplete-item {
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.client-autocomplete-item:hover {
  background-color: #f1f5f9;
}

html.dark .client-autocomplete-item:hover {
  background-color: #1e293b;
}

.client-match-mark {
  background-color: rgba(30, 79, 138, 0.15);
  color: var(--primary);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}

html.dark .client-match-mark {
  background-color: rgba(30, 79, 138, 0.3);
  color: #a5b4fc;
}

/* ========================================================================== */
/* RECURRENCE BADGES & PREVIEW */
/* ========================================================================== */
.badge-recorrente {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  background-color: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  white-space: nowrap;
}

html.dark .badge-recorrente {
  background-color: rgba(109, 40, 217, 0.25);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.4);
}

.recurr-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  transition: all 0.15s ease;
}

html.dark .recurr-preview-chip {
  background-color: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

.recurr-preview-chip.active {
  background-color: #e0e7ff;
  border-color: #a5b4fc;
  color: #3730a3;
}

html.dark .recurr-preview-chip.active {
  background-color: rgba(30, 79, 138, 0.25);
  border-color: rgba(129, 140, 248, 0.5);
  color: #c7d2fe;
}

/* Skip Day Chips */
.skip-day-chip {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.skip-day-chip:hover:not(.disabled) {
  border-color: #f43f5e;
  color: #e11d48;
  background-color: #fff1f2;
}
.skip-day-chip.active {
  border-color: #e11d48;
  background-color: #ffe4e6;
  color: #be123c;
}
.skip-day-chip.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  border-color: #e2e8f0;
  background-color: #f1f5f9;
  color: #94a3b8;
}
html.dark .skip-day-chip {
  background-color: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
html.dark .skip-day-chip:hover:not(.disabled) {
  background-color: #88133740;
  border-color: #f43f5e;
  color: #fda4af;
}
html.dark .skip-day-chip.active {
  background-color: #88133760;
  border-color: #f43f5e;
  color: #fecdd3;
}
html.dark .skip-day-chip.disabled {
  background-color: #0f172a;
  border-color: #1e293b;
  color: #64748b;
}

/* Recurrence preview adapted badge */
.chip-recurr-adapted {
  border-color: #f59e0b !important;
  background-color: #fef3c7 !important;
  color: #b45309 !important;
}
html.dark .chip-recurr-adapted {
  border-color: #d97706 !important;
  background-color: rgba(217, 119, 6, 0.15) !important;
  color: #fcd34d !important;
}

/* ==========================================================================
   BUTTON LOADING & INTERACTIVE ACTION STATES (ANTI-DUPLICATE UX)
   ========================================================================== */

.btn-loading {
  position: relative !important;
  pointer-events: none !important;
  cursor: wait !important;
  opacity: 0.82 !important;
  user-select: none !important;
  transition: all 0.18s ease-in-out !important;
}

.btn-spinner {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button.btn-loading,
button[disabled].btn-loading {
  cursor: wait !important;
}

html.dark .btn-loading {
  opacity: 0.78 !important;
}

/* Feedback error shake animation */
.btn-state-error {
  animation: btn-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes btn-shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* ==========================================================================
   IDENTIDADE VISUAL HORAI & REDESIGN DA TELA DE LOGIN
   ========================================================================== */

/* Typography & Brand Accents */
.horai-brand-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.horai-ai-gradient {
  background: linear-gradient(135deg, #1E4F8A 0%, #0F2A4A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.dark .horai-ai-gradient {
  background: linear-gradient(135deg, #8DB8E4 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.horai-ai-badge {
  background: var(--hz-azul-nevoa, #EAF2FB);
  border: 1px solid rgba(30, 79, 138, 0.2);
  color: var(--hz-azul, #1E4F8A);
}

/* Screen Login Base Background (Serene Azure Mesh in Light Mode, Deep Navy in Dark Mode) */
.horai-login-screen {
  background: 
    radial-gradient(circle at 10% 15%, rgba(214, 229, 247, 0.8) 0%, transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(234, 242, 251, 0.85) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(246, 231, 190, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(141, 184, 228, 0.4) 0%, transparent 45%),
    linear-gradient(135deg, #F5F8FC 0%, #EAF2FB 50%, #E3EAF2 100%);
}

.dark .horai-login-screen {
  background: linear-gradient(135deg, #071322 0%, #0B1D33 50%, #0F2A4A 100%);
}

/* Glassmorphism & Surface Styles */
.horai-glass-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 25px 60px -15px rgba(30, 41, 59, 0.12), 0 8px 25px -5px rgba(30, 79, 138, 0.08);
}

.horai-glass-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(203, 213, 225, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.horai-glass-card:hover {
  background: #ffffff;
  border-color: rgba(30, 79, 138, 0.35);
  box-shadow: 0 6px 16px rgba(30, 79, 138, 0.08);
  transform: translateY(-2px);
}

/* Glassmorphism Dark Mode */
.dark .horai-glass-panel {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 50px rgba(30, 79, 138, 0.15);
}

.dark .horai-glass-card {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.dark .horai-glass-card:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(30, 79, 138, 0.45);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.dark .horai-ai-badge {
  background: rgba(30, 79, 138, 0.18);
  border-color: rgba(30, 79, 138, 0.35);
  color: #a5b4fc;
}

.dark .horai-dial-center {
  border-color: #0f172a;
}

/* Viewport Boundaries */
#screenLogin {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ===================================================================== */
/* AURORA BOREALIS ANIMATED BACKGROUND (PURE CSS GPU-ACCELERATED) */
/* ===================================================================== */
.horai-aurora-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Subtle Geometric Grid Matrix with Radial Vignette */
.horai-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(30, 79, 138, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 50%, black 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 25%, transparent 80%);
  opacity: 0.45;
  pointer-events: none;
}

.dark .horai-bg-grid {
  background-image: radial-gradient(rgba(129, 140, 248, 0.25) 1px, transparent 1px);
  opacity: 0.45;
}

/* Aurora Curtains: Flowing waves with eye-friendly yet clearly visible soft hues in Light Mode */
.horai-aurora-curtain {
  position: absolute;
  width: 140vw;
  height: 65vh;
  filter: blur(60px);
  will-change: transform, opacity;
  pointer-events: none;
  opacity: 0.72;
}

.horai-aurora-top {
  top: -10vh;
  left: -20vw;
  background: linear-gradient(
    135deg,
    rgba(165, 180, 252, 0.65) 0%,
    rgba(192, 132, 252, 0.55) 28%,
    rgba(103, 232, 249, 0.52) 58%,
    rgba(110, 231, 183, 0.38) 85%,
    transparent 100%
  );
  animation: horai-aurora-wave-top 22s ease-in-out infinite alternate;
}

.horai-aurora-bottom {
  bottom: -12vh;
  right: -20vw;
  background: linear-gradient(
    -45deg,
    rgba(56, 189, 248, 0.55) 0%,
    rgba(165, 180, 252, 0.60) 35%,
    rgba(216, 180, 254, 0.52) 70%,
    transparent 100%
  );
  animation: horai-aurora-wave-bottom 26s ease-in-out infinite alternate;
}

/* Passing Aurora Beams: dynamic light streams sweeping across */
.horai-aurora-beam {
  position: absolute;
  width: 150vw;
  height: 260px;
  filter: blur(52px);
  will-change: transform, opacity;
  pointer-events: none;
  opacity: 0.60;
}

.horai-beam-1 {
  top: 15%;
  left: -25vw;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(165, 180, 252, 0.55) 25%,
    rgba(196, 181, 253, 0.55) 50%,
    rgba(103, 232, 249, 0.45) 75%,
    transparent 100%
  );
  animation: horai-aurora-sweep-1 24s ease-in-out infinite alternate;
}

.horai-beam-2 {
  bottom: 18%;
  right: -25vw;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(125, 211, 252, 0.50) 25%,
    rgba(165, 180, 252, 0.55) 50%,
    rgba(216, 180, 254, 0.45) 75%,
    transparent 100%
  );
  animation: horai-aurora-sweep-2 28s ease-in-out infinite alternate;
}

/* Floating Luminous Orbs */
.horai-aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  will-change: transform;
  pointer-events: none;
  opacity: 0.65;
}

.horai-orb-cyan {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.55) 0%, rgba(165, 180, 252, 0.30) 45%, transparent 70%);
  top: 2%;
  right: 5%;
  animation: horai-orb-float-1 18s ease-in-out infinite alternate;
}

.horai-orb-purple {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(216, 180, 254, 0.55) 0%, rgba(192, 132, 252, 0.30) 45%, transparent 70%);
  bottom: 2%;
  left: 5%;
  animation: horai-orb-float-2 22s ease-in-out infinite alternate;
}

/* Dark Mode: Vibrant Luminous Aurora Glowing with Screen Blend */
.dark .horai-aurora-curtain {
  opacity: 0.88;
  mix-blend-mode: screen;
}

.dark .horai-aurora-top {
  background: linear-gradient(
    135deg,
    rgba(30, 79, 138, 0.55) 0%,
    rgba(168, 85, 247, 0.6) 28%,
    rgba(6, 182, 212, 0.48) 55%,
    rgba(16, 185, 129, 0.3) 80%,
    transparent 100%
  );
}

.dark .horai-aurora-bottom {
  background: linear-gradient(
    -45deg,
    rgba(14, 165, 233, 0.5) 0%,
    rgba(30, 79, 138, 0.6) 35%,
    rgba(236, 72, 153, 0.4) 70%,
    transparent 100%
  );
}

.dark .horai-aurora-beam {
  opacity: 0.8;
  mix-blend-mode: screen;
}

.dark .horai-beam-1 {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(30, 79, 138, 0.45) 25%,
    rgba(168, 85, 247, 0.6) 50%,
    rgba(56, 189, 248, 0.5) 75%,
    transparent 100%
  );
}

.dark .horai-beam-2 {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(6, 182, 212, 0.45) 25%,
    rgba(30, 79, 138, 0.55) 50%,
    rgba(236, 72, 153, 0.35) 75%,
    transparent 100%
  );
}

.dark .horai-aurora-orb {
  opacity: 0.85;
  mix-blend-mode: screen;
}

.dark .horai-orb-cyan {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.45) 0%, rgba(30, 79, 138, 0.25) 50%, transparent 70%);
}

.dark .horai-orb-purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, rgba(236, 72, 153, 0.2) 50%, transparent 70%);
}

@keyframes horai-aurora-wave-top {
  0% {
    transform: translate3d(-5%, -5%, 0) rotate(-4deg) scaleY(0.9);
  }
  50% {
    transform: translate3d(8%, 10%, 0) rotate(5deg) scaleY(1.2);
  }
  100% {
    transform: translate3d(-2%, 5%, 0) rotate(-2deg) scaleY(1);
  }
}

@keyframes horai-aurora-wave-bottom {
  0% {
    transform: translate3d(5%, 5%, 0) rotate(3deg) scaleY(1);
  }
  50% {
    transform: translate3d(-10%, -8%, 0) rotate(-5deg) scaleY(1.25);
  }
  100% {
    transform: translate3d(3%, -3%, 0) rotate(2deg) scaleY(0.95);
  }
}

@keyframes horai-aurora-sweep-1 {
  0% {
    transform: translate3d(-15%, -10%, 0) rotate(-10deg);
    opacity: 0.4;
  }
  50% {
    transform: translate3d(18%, 15%, 0) rotate(3deg);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(38%, 0%, 0) rotate(-7deg);
    opacity: 0.45;
  }
}

@keyframes horai-aurora-sweep-2 {
  0% {
    transform: translate3d(15%, 10%, 0) rotate(9deg);
    opacity: 0.4;
  }
  50% {
    transform: translate3d(-18%, -15%, 0) rotate(-4deg);
    opacity: 0.75;
  }
  100% {
    transform: translate3d(-38%, 5%, 0) rotate(6deg);
    opacity: 0.45;
  }
}

@keyframes horai-orb-float-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(-70px, 60px, 0) scale(1.2);
  }
}

@keyframes horai-orb-float-2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(60px, -70px, 0) scale(1.18);
  }
}

/* Clock / Time Mechanics */
.horai-dial-container {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.horai-dial-aura {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 79, 138, 0.2) 0%, rgba(201, 154, 46, 0.12) 45%, transparent 70%);
  animation: horai-aura-pulse 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes horai-aura-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.45;
  }
  100% {
    transform: scale(1.15);
    opacity: 0.85;
  }
}

.horai-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(30, 79, 138, 0.35);
  animation: horai-spin-orbit 60s linear infinite;
}
.dark .horai-orbit-ring {
  border-color: rgba(141, 184, 228, 0.35);
}

.horai-orbit-ring-inner {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 1px solid rgba(201, 154, 46, 0.3);
  animation: horai-spin-reverse 45s linear infinite;
}

.horai-orbit-ring-outer {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px dotted rgba(15, 42, 74, 0.2);
  animation: horai-spin-orbit 90s linear infinite;
}
.dark .horai-orbit-ring-outer {
  border-color: rgba(141, 184, 228, 0.2);
}

.horai-orbit-satellite {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hz-ouro, #C99A2E);
  box-shadow: 0 0 10px #C99A2E, 0 0 4px #8A6414;
  top: -3.5px;
  left: calc(50% - 3.5px);
}

.horai-sat-2 {
  background: #1E4F8A;
  box-shadow: 0 0 8px #1E4F8A;
  top: auto;
  bottom: -3.5px;
}
.dark .horai-sat-2 {
  background: #8DB8E4;
  box-shadow: 0 0 8px #8DB8E4;
}

.horai-dial-ticks {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  pointer-events: none;
}

.horai-tick {
  position: absolute;
  background: rgba(30, 79, 138, 0.4);
  border-radius: 1px;
}

.dark .horai-tick {
  background: rgba(141, 184, 228, 0.45);
}

.horai-tick-12 {
  width: 2px;
  height: 6px;
  top: 0;
  left: calc(50% - 1px);
}
.horai-tick-6 {
  width: 2px;
  height: 6px;
  bottom: 0;
  left: calc(50% - 1px);
}
.horai-tick-3 {
  width: 6px;
  height: 2px;
  right: 0;
  top: calc(50% - 1px);
}
.horai-tick-9 {
  width: 6px;
  height: 2px;
  left: 0;
  top: calc(50% - 1px);
}

.horai-hour-hand {
  position: absolute;
  width: 3px;
  height: 48px;
  background: linear-gradient(to top, #C99A2E, #E5BA4E);
  border-radius: 2px;
  bottom: 50%;
  left: calc(50% - 1.5px);
  transform-origin: bottom center;
  animation: horai-clock-tick 120s linear infinite;
  box-shadow: 0 0 8px rgba(201, 154, 46, 0.5);
}

.horai-minute-hand {
  position: absolute;
  width: 2px;
  height: 68px;
  background: linear-gradient(to top, #1E4F8A, #2A6EB4);
  border-radius: 2px;
  bottom: 50%;
  left: calc(50% - 1px);
  transform-origin: bottom center;
  animation: horai-clock-tick 30s linear infinite;
  box-shadow: 0 0 8px rgba(30, 79, 138, 0.4);
}
.dark .horai-minute-hand {
  background: linear-gradient(to top, #8DB8E4, #FFFFFF);
}

.horai-dial-center {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hz-ouro, #C99A2E);
  box-shadow: 0 0 12px rgba(201, 154, 46, 0.6), 0 0 2px #fff;
  border: 2px solid #ffffff;
}

.horai-pulse-beacon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--hz-ouro, #C99A2E);
  box-shadow: 0 0 0 0 rgba(201, 154, 46, 0.7);
  animation: horai-beacon-pulse 2s infinite;
}

@keyframes horai-beacon-pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes horai-spin-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes horai-spin-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes horai-clock-tick {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .horai-light-stream,
  .horai-dial-aura,
  .horai-orbit-ring,
  .horai-orbit-ring-inner,
  .horai-orbit-ring-outer,
  .horai-hour-hand {
    animation: none !important;
  }
}

/* ==========================================================================
   INTERACTIVE DATE RANGE PICKER (DRP) ANIMATIONS & STYLES
   ========================================================================== */
.drp-day-btn {
  position: relative;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.drp-day-btn:hover {
  transform: scale(1.08);
  z-index: 10;
}

.drp-range-start,
.drp-range-end {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 6px -1px rgba(30, 79, 138, 0.35);
  transform: scale(1.04);
  z-index: 10;
}

.drp-range-start {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.drp-range-end {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.drp-range-start.drp-range-end,
.drp-day-btn.drp-range-single {
  border-radius: 0.5rem !important;
}

.drp-range-start *,
.drp-range-end * {
  color: #ffffff !important;
}

.drp-range-in {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
}

.dark .drp-range-in {
  background-color: rgba(67, 56, 202, 0.35) !important;
  color: #c7d2fe !important;
}

.drp-preview-in {
  background-color: #eef2ff !important;
  color: #4338ca !important;
  border-radius: 0 !important;
  animation: drp-pulse-fill 0.25s ease-out;
}

.dark .drp-preview-in {
  background-color: rgba(30, 79, 138, 0.2) !important;
  color: #e0e7ff !important;
}

@keyframes drp-pulse-fill {
  0% {
    background-color: rgba(30, 79, 138, 0.4);
    transform: scale(0.97);
  }
  100% {
    background-color: #eef2ff;
    transform: scale(1);
  }
}



/* Shared usability patterns — design/ is the source of semantic tokens. */
.module-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--info-bg);
  color: var(--info-fg);
  font-size: var(--fs-sm);
}
.module-state[hidden] { display: none; }
.module-state-error { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-fg); }
.module-state-loading::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.module-state-loading > span { flex: 1; }
body.modal-open { overflow: hidden; }
.modal-backdrop > div { max-height: calc(100dvh - 32px); min-height: 0; overflow-y: auto; }
body :is(button, a.btn, .btn-primary, .btn-secondary) { min-height: var(--hit); }
body button:has(> svg):not(:has(span)) { min-width: var(--hit); }
body :is(input, select):not([type='hidden']):not([type='checkbox']):not([type='radio']):not([type='range']):not(.sr-only) {
  min-height: var(--hit);
}
body :is([class*='text-[9px]'], [class*='text-[10px]'], [class*='text-[11px]']) { font-size: var(--fs-cap); }
body :is(label, input, select, textarea) { font-size: var(--fs-sm); }
body :is(input, select, textarea):not([type='checkbox']):not([type='radio']) { border-color: var(--border-input); }
body :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .65; }
.toast-dismiss { align-self: center; flex-shrink: 0; font-size: 22px; min-width: var(--hit); border-radius: var(--r-sm); }
#toastContainer { max-width: min(480px, calc(100vw - 32px)); max-height: 50dvh; overflow-y: auto; }
#toastContainer > div { font-size: var(--fs-sm); align-items: flex-start; }
.agenda-toolbar { gap: var(--s4); }
.agenda-toolbar input { font-size: var(--fs-sm); }
.agenda-toolbar > div { min-width: 0; }
.calendar-responsive-wrapper:not(.hidden) { overflow-x: auto; }
#popoverDateRangePicker { width: min(360px, calc(100vw - 24px)); }
.drp-range-start, .drp-range-end { color: var(--on-primary) !important; box-shadow: var(--sh1); }

@media (max-width: 1023px) {
  #screenLogin { align-items: flex-start; }
  #screenLogin > .horai-glass-panel { margin-top: 48px; margin-bottom: 16px; }
  #screenLogin .lg\:col-span-6:first-child { padding: 24px; }
  #screenLogin .lg\:col-span-6:first-child > .my-8,
  #screenLogin .lg\:col-span-6:first-child > .mt-auto { display: none; }
  #screenLogin .lg\:col-span-6:last-child { padding: 24px; }
  #screenLogin .lg\:col-span-6:last-child > .mt-auto { margin-top: 24px; }
}
@media (max-width: 639px) {
  .module-state { flex-wrap: wrap; }
  .module-state > button { width: 100%; }
  .modal-backdrop { padding: 8px; }
  .modal-backdrop > div { max-height: calc(100dvh - 16px); padding: 16px; }
  #modalAgendamento > div, #modalEditarAgendamento > div { height: calc(100dvh - 16px); }
  .agenda-toolbar > div { width: 100%; gap: 8px; }
  .agenda-toolbar > div > .relative { flex: 1 1 100%; width: 100%; }
  #calendarPeriodLabel { flex-basis: 100%; font-size: var(--fs-sm); }
  #calControlsSemana, #calControlsDia { flex-wrap: wrap; }
  #btnNovoAgendamento { width: 100%; justify-content: center; }
  #calendarVisualWrapper[data-view='semana'] :is(#calendarDaysHeader, #calendarScrollContainer) { min-width: 840px; }
  #toastContainer { bottom: 16px; right: 16px; left: 16px; }
  .tab-content .overflow-x-auto { overscroll-behavior-x: contain; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 767px) {
  #topbarModeLabel, #workspaceSwitcherContainer { display: none; }
  #authenticatedApp > header > div { gap: 8px; }
  #authenticatedApp > header > div > div { gap: 8px; }
  #userProfileBar { border-left: none; padding-left: 0; }
  #userAvatar { display: none; }
}
@media (max-width: 399px) {
  #authenticatedApp > header img { width: 32px; height: 32px; }
  #authenticatedApp > header > div { padding-left: 12px; padding-right: 12px; }
  #authenticatedApp > header .font-black.text-lg { font-size: 16px; }
}
#formRegistrarPagamento > div:last-child {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--surface);
  padding-bottom: 8px;
}
#modalRegistrarPagamento > div { scroll-padding-bottom: 88px; }
#formRegistrarPagamento :is(input, select, textarea) { scroll-margin-bottom: 88px; }
#regPagContextServico { white-space: normal; }
label:has(input[type='checkbox']), label:has(input[type='radio']) { min-height: var(--hit); }
label:has(input.sr-only:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

.appointment-list-summary { flex: 1; overflow-wrap: anywhere; }
.appointment-list-summary > div:last-child { min-width: 0; }
.appointment-list-actions { max-width: 100%; }
.appointment-details { overflow-wrap: anywhere; color: var(--text); }
.appointment-details .bg-slate-50 { background: var(--bg); border-color: var(--border); }
.appointment-details :is(.text-slate-900, .text-slate-800, .text-slate-700) { color: var(--text); }
.appointment-details :is(.text-slate-400, .text-slate-500) { color: var(--text-2); }
.appointment-details [hidden] { display: none !important; }
#detalhesValor { color: var(--primary) !important; }
#modalDetalhesAgendamento .border-b, #modalDetalhesAgendamento .border-t { border-color: var(--border); }
#agendaDensityControls[hidden], #agendaClickHint[hidden] { display: none !important; }
@media (max-width: 639px) {
  .appointment-list-actions { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-list-actions > button { justify-content: center; }
}
/* Product workspaces: semantic tokens shared by navigation, records and forms. */
.ux-navigation { display: grid; gap: 4px; width: 100%; }
.ux-navigation > p { margin: 16px 12px 4px; color: var(--text-2, #5f7189); font-size: 12px; font-weight: 700; }
.ux-navigation .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; border-radius: 10px; width: 100%; color: var(--text); font-size: 14px; }
.ux-navigation svg { width: 19px; height: 19px; flex-shrink: 0; }
.ux-navigation .nav-item[aria-current="page"] { background: var(--primary-soft, #eaf2fb); color: var(--primary); font-weight: 700; }
html.dark .ux-navigation .nav-item[aria-current="page"] { background: var(--surface); color: var(--text); }
.ux-workspace { color: var(--text); display: grid; gap: 20px; }
.ux-workspace.hidden { display: none; }
.ux-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ux-page-header h1 { font-size: 26px; line-height: 1.25; font-weight: 750; margin: 4px 0 8px; }
.ux-page-header h2 { font-size: 20px; font-weight: 700; }
.ux-page-header p, .ux-help { color: var(--text-2, #5f7189); font-size: 14px; line-height: 1.5; }
.ux-eyebrow { font-size: 12px; font-weight: 650; color: var(--text-2, #5f7189); }
.ux-section-title { font-size: 18px; font-weight: 700; margin: 24px 0 12px; }
.ux-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.ux-metrics > * { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; text-align: left; background: var(--surface); border: 1px solid var(--border, #dbe3ed); border-radius: 14px; }
.ux-metrics strong { font-size: 30px; line-height: 1; color: var(--primary); }
.ux-metrics span { font-size: 14px; }
.ux-records { display: grid; gap: 12px; }
.ux-record { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px; border: 1px solid var(--border, #dbe3ed); border-radius: 14px; background: var(--surface); min-width: 0; }
.ux-record > div { min-width: 0; }
.ux-record h3 { font-size: 16px; font-weight: 700; margin: 4px 0; overflow-wrap: anywhere; }
.ux-record p { font-size: 14px; color: var(--text-2, #5f7189); overflow-wrap: anywhere; }
.ux-record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ux-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; margin-top: 8px; font-size: 12px; font-weight: 650; border-radius: 8px; background: var(--surface-2, #f1f5f9); color: var(--text); }
.ux-status svg { width: 15px; height: 15px; }
.ux-status[data-status="CONCLUIDO"], .ux-status[data-status="CONFIRMADO"] { color: var(--ok-fg); background: var(--ok-bg); }
.ux-status[data-status="CANCELADO"], .ux-status[data-status="NAO_COMPARECEU"] { color: var(--err-fg); background: var(--err-bg); }
.ux-status[data-status="PENDENTE"] { color: var(--warn-fg); background: var(--warn-bg); }
.ux-filter-bar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; padding: 16px; background: var(--surface); border: 1px solid var(--border, #dbe3ed); border-radius: 14px; }
.ux-filter-bar label { display: grid; gap: 6px; flex: 1 1 160px; color: var(--text); }
.ux-filter-bar input, .ux-filter-bar select, .ux-mobile-stage select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border, #cbd5e1); border-radius: 8px; background: var(--surface); color: var(--text); }
.ux-money { display: grid; gap: 6px; font-size: 14px; }
.ux-notice { padding: 14px 16px; border: 1px solid var(--border, #cbd5e1); background: var(--surface); color: var(--text); border-radius: 10px; font-size: 14px; line-height: 1.5; margin: 8px 0; }
.ux-notice button { margin: 8px; }
.ux-empty { padding: 32px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--border, #cbd5e1); border-radius: 14px; }
.ux-empty strong { display: block; font-size: 17px; }
.ux-empty p { font-size: 14px; margin: 8px 0 16px; color: var(--text-2, #5f7189); }
.ux-disclosure { padding: 12px; border: 1px solid var(--border, #cbd5e1); border-radius: 10px; }
.ux-disclosure summary { cursor: pointer; font-weight: 650; font-size: 14px; min-height: 32px; }
.ux-dialog-backdrop { z-index: 72; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ux-dialog-backdrop.hidden { display: none; }
.ux-dialog { background: var(--surface); color: var(--text); border-radius: 16px; padding: 24px; width: min(760px,100%); max-height: 90dvh; overflow: auto; }
.ux-dialog h2 { line-height: 1.3; }
.ux-mobile-stage { display: none; }
[hidden] { display: none !important; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { outline: 2px solid var(--err-fg); outline-offset: 2px; }
body :is(.ux-workspace,.ux-dialog) :is(button,input,select):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
body :is([class*='text-[10.5px]'],[class*='text-[11.5px]']) { font-size: max(12px,var(--fs-cap)); }
body button:has(>svg:only-child) { min-width: 44px; }
@media (max-width: 900px) { .ux-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 639px) {
  .ux-page-header h1 { font-size: 22px; }
  .ux-record { padding: 16px; align-items: flex-start; }
  .ux-record > div:first-child { width: 100%; }
  .ux-record-actions { width: 100%; }
  .ux-record-actions button { flex: 1 1 auto; }
  .ux-metrics > * { padding: 14px; }
  .ux-metrics strong { font-size: 25px; }
  .ux-filter-bar label { flex-basis: 100%; }
  .ux-dialog-backdrop { padding: 0; }
  .ux-dialog { max-height: 100dvh; min-height: 100dvh; border-radius: 0; padding: 16px; }
  .ux-mobile-stage { display: grid; gap: 8px; font-size: 14px; }
  .ux-mobile-stage.hidden, #atendimentosKanbanWrapper .ux-stage-hidden { display: none; }
  #atendimentosKanbanWrapper .kanban-column > div[id^="kanbanCol"] { max-height: none; overflow: visible; }
}

.ux-field-error { color: var(--err-fg); font-size: 13px; margin-top: 6px; }
.ux-view-options { padding: 8px 12px; position: relative; }
.ux-view-options summary { min-height: 28px; display: list-item; }
.ux-view-options[open] > div { position: absolute; right: 0; top: 100%; padding: 8px; z-index: 30; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh2); }

.ux-finance-period { flex: 1 1 180px; }
.ux-finance-period[open] { flex-basis: 100%; }
.ux-finance-period label { margin: 10px 0; }

body.sidebar-collapsed .ux-navigation > p { display: none; }
@media (min-width:768px) and (max-width:1023px) {
  #authenticatedApp > header button[title="Busca Rápida e Comandos (Ctrl + K)"] { display: none; }
  #authenticatedApp > header button[title="Buscar"] { display: inline-flex; }
  #userProfileBar > .text-right, #workspaceSwitcherContainer > label, #tenantRoleBadge { display: none; }
  #workspaceSwitcherContainer { gap: 4px; padding-left: 8px; }
  #tenantSelect { min-width: 0; max-width: 180px; }
  #authenticatedApp > header > div { gap: 8px; padding-inline: 16px; }
  #authenticatedApp > header > div > div { gap: 8px; }
  #sidebarGestor { width: 200px; padding: 10px; }
  #sidebarGestor .ux-navigation .nav-item { padding-inline: 8px; gap: 8px; }
}

button[data-ux-variant="primary"] { background: var(--primary) !important; color: var(--on-primary) !important; border-radius: 10px; }
button[data-ux-variant="danger"] { background: var(--err-fg) !important; color: var(--on-primary) !important; border-radius: 10px; }
button[data-ux-variant]:hover:not(:disabled) { filter: brightness(1.08); }
button[data-ux-variant]:disabled { opacity: .55; cursor: not-allowed; }
button[data-ux-variant]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Motion and appointment hierarchy: keep controls stable while content enters. */
.ux-recurrence-hint { display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--text-2); line-height:1.5; }
.ux-switch { position:relative; display:inline-flex; align-items:center; justify-content:center; width:48px; height:44px; flex:0 0 48px; cursor:pointer; margin-left:12px; }
.ux-switch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; z-index:1; }
.ux-switch-track { position:relative; width:40px; height:24px; border-radius:20px; background:var(--text-2); transition:background-color 180ms ease; pointer-events:none; }
.ux-switch-track::after { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform 180ms ease; }
.ux-switch input:checked + .ux-switch-track { background:var(--primary); }
.ux-switch input:checked + .ux-switch-track::after { transform:translateX(16px); }
.ux-switch input:focus-visible + .ux-switch-track { outline:3px solid var(--focus); outline-offset:3px; }
#agendRecorrenciaConfig > div { margin-top:16px; }
#agendRecorrenciaConfig > div > .flex.justify-between { flex-wrap:wrap; gap:6px 12px; }
#agendRecorrenciaConfig button { min-height:40px; }
#agendRecorrenciaConfig button svg { flex-shrink:0; }
#btnRecurrCustom { gap:4px; font-size:11px; }
#servicoMetaPreview { white-space:normal; overflow:visible; line-height:1.5; margin-top:6px; }
@keyframes ux-surface-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference) {
  .tab-content:not(.hidden) { animation:ux-surface-enter 220ms cubic-bezier(.2,.8,.2,1); }
  details[open] > :not(summary) { animation:ux-surface-enter 180ms ease-out; }
  #boxRecurrCustomDays:not(.hidden) { animation:ux-surface-enter 180ms ease-out; }
  @supports (interpolate-size: allow-keywords) {
    details { interpolate-size:allow-keywords; }
    details::details-content { block-size:0; overflow:clip; transition:block-size 220ms ease, content-visibility 220ms allow-discrete; }
    details[open]::details-content { block-size:auto; }
  }
}
@media (max-width:1100px) {
  #agendRecorrenciaConfig .grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Appointment edit: readable metadata and actions available without scrolling. */
#editServicoMetaPreview, #editAgendRecorrenteDesc { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.6; overflow-wrap:anywhere; }
#editServicoMetaPreview { margin-top:6px; }
#editAgendAcoesOperacionais { flex-shrink:0; margin-bottom:12px; }
#editAgendAcoesOperacionais > .flex { gap:8px; }
.ux-payment-history-summary { cursor:pointer; min-height:44px; padding:10px 4px; font-size:12px; font-weight:600; color:var(--text); }
.ux-payment-history-summary #finCountPagamentos { float:right; margin-left:12px; }
.ux-payment-history-summary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
#editPaymentHistory[open] #finListaPagamentos { max-height:none; overflow:visible; }
@media (max-width:767px) {
  #editAgendAcoesOperacionais { padding:8px; }
  #editAgendAcoesOperacionais button { min-width:0; flex:1 1 40%; }
}

/* Keep global search inside the header at notebook widths. */
#authenticatedApp > header button[title="Busca Rápida e Comandos (Ctrl + K)"] { min-width:0; max-width:340px; height:44px; white-space:nowrap; }
#authenticatedApp > header button[title="Busca Rápida e Comandos (Ctrl + K)"] > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#authenticatedApp > header button[title="Busca Rápida e Comandos (Ctrl + K)"] > :is(svg,kbd) { flex-shrink:0; white-space:nowrap; }
@media (min-width:768px) and (max-width:1399px) {
  #authenticatedApp > header button[title="Busca Rápida e Comandos (Ctrl + K)"] { display:none; }
  #authenticatedApp > header button[title="Buscar"] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; }
}

/* Attendance controls wrap according to available space beside the sidebar. */
#tab-atendimentos .ux-attendance-header { flex-direction:row; flex-wrap:wrap; }
.ux-attendance-header > div:first-child { flex:1 1 280px; min-width:0; }
.ux-attendance-header > div:first-child > div:first-child { flex-shrink:0; }
.ux-attendance-header > div:last-child { display:flex; flex:0 1 auto; flex-wrap:wrap; min-width:0; max-width:100%; gap:8px; }
.ux-attendance-header > div:last-child > * { flex-shrink:0; }
.ux-attendance-header button { white-space:nowrap; justify-content:center; }
.ux-attendance-header button svg { flex-shrink:0; }
@media (max-width:1023px) {
  .ux-attendance-header > div:last-child { flex-basis:100%; }
}
@media (max-width:479px) {
  .ux-attendance-header > div:last-child > button:last-child { width:100%; }
}

/* Daily summary adapts to the available content width. */
#todayLivePulseBar { flex-flow:row wrap; min-width:0; }
#todayLivePulseBar > div:first-child { flex:1 1 280px; min-width:0; }
#todayNextApptText { flex-wrap:wrap; white-space:normal; overflow-wrap:anywhere; gap:2px 6px; }
#todayLivePulseBar > div:last-child { flex:0 1 auto; min-width:0; max-width:100%; flex-wrap:wrap; }
#todayLivePulseBar > div:last-child > div { min-width:0; flex-wrap:wrap; }
#todayProgressText { white-space:normal; }
@media (max-width:1023px) {
  #todayLivePulseBar > div:last-child { flex-basis:100%; justify-content:space-between; }
  #todayLivePulseBar .text-right { text-align:left; }
}
#sidebarGestor .ux-tenant-card { padding:14px; border-radius:14px; background:var(--surface); border-color:var(--border); box-shadow:inset 3px 0 0 var(--primary); }
#sidebarGestor .tenant-card-content > div:first-child { font-size:10px; letter-spacing:.06em; color:var(--text-2); margin-bottom:8px; }
#tenantCardNome { white-space:normal; overflow:visible; overflow-wrap:anywhere; line-height:1.5; font-size:12px; }
#sidebarGestor .sidebar-footer { padding:14px 4px 2px; gap:8px; border-top:1px solid var(--border); }
.ux-sidebar-brand { font-size:14px; font-weight:750; letter-spacing:-.03em; color:var(--primary); }
.ux-sidebar-version { padding:3px 7px; border-radius:6px; background:var(--surface-2); color:var(--text-2); font-size:10px; line-height:1.3; }

.ux-brand-home { display:inline-flex; align-items:center; gap:12px; min-height:44px; flex-shrink:0; text-align:left; border-radius:10px; cursor:pointer; }
.ux-brand-home:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.ux-brand-home:hover { background:var(--primary-soft); }

/* Initial dialog focus belongs to its title, not to an untouched form field. */
#modalAgendamento-title:focus { outline:none; box-shadow:none; }
.slot-add-more-btn { padding:0; min-width:44px; border-radius:10px; }

/* Compact role indicator, separate from the company name. */
#tenantRoleBadge { flex-shrink:0; padding:6px 10px; border-radius:8px; font-size:10px; font-weight:650; line-height:1.2; letter-spacing:.04em; color:var(--primary); background:var(--primary-soft); border:1px solid var(--border); box-shadow:none; cursor:default; }

/* Calendar cards show one clear hierarchy, without competing micro-badges. */
.ux-calendar-card { padding:4px 6px !important; overflow:hidden; }
.ux-calendar-heading { display:flex; align-items:baseline; gap:6px; min-width:0; font-size:11px; line-height:15px; color:var(--text); }
.ux-calendar-heading time { flex-shrink:0; font-weight:750; font-variant-numeric:tabular-nums; }
.ux-calendar-patient { font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ux-calendar-service, .ux-calendar-professional { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:14px; color:var(--text-2); }
.ux-calendar-status { margin-top:2px; font-size:10px; line-height:13px; font-weight:600; color:var(--text); }
.ux-calendar-card[data-density="minimal"] { padding-block:1px !important; }

.ux-calendar-team { display:flex; align-items:center; gap:4px; min-width:0; height:17px; }
.ux-professional-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:var(--professional-color); }
.ux-calendar-team .ux-calendar-professional { flex:1 1 auto; min-width:0; font-weight:600; }
.ux-patient-initials { display:flex; flex:0 1 auto; min-width:0; overflow:hidden; padding-left:2px; }
.ux-patient-initial { display:inline-flex; align-items:center; justify-content:center; flex:0 0 15px; height:15px; border:1px solid var(--surface); border-radius:50%; font-size:9px; line-height:1; font-weight:700; background:#2563eb; color:#fff; }
.ux-patient-initial + .ux-patient-initial { margin-left:-3px; }
.ux-patient-initial[data-tone="1"] { background:#7c3aed; }
.ux-patient-initial[data-tone="2"] { background:#0f766e; }
.ux-calendar-card .ux-calendar-service { line-height:12px; font-size:9px; }

/* Compact calendar actions and initials that do not shrink out of view. */
body #calendarColumnsContainer button.slot-add-more-btn { width:28px; min-width:28px; height:28px; min-height:28px; padding:0; border-radius:8px; box-shadow:none; }
.ux-calendar-team { display:grid; grid-template-columns:6px minmax(0,1fr) auto; width:100%; }
.ux-patient-initials { flex:none; max-width:48px; padding:0; overflow-x:auto; scrollbar-width:none; }
.ux-patient-initials::-webkit-scrollbar { display:none; }
.ux-patient-initial { box-sizing:border-box; }

/* Commercial plans and independent receivables share the existing workspace UI. */
.ux-commercial { display:inline-flex; align-items:center; border:1px solid var(--border); background:var(--surface); color:var(--primary); border-radius:6px; padding:2px 6px; font-size:11px; font-weight:650; max-width:100%; overflow-wrap:anywhere; }
.commercial-dialog { width:min(760px, calc(100vw - 24px)); max-height:90dvh; overflow:auto; }
#commercialDialogBody { display:grid; gap:16px; }
#commercialDialogBody label { display:grid; gap:6px; font-size:13px; color:var(--text); }
#commercialDialogBody input:not([type=checkbox]), #commercialDialogBody select, #commercialDialogBody textarea { width:100%; min-width:0; padding:10px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface); }
.commercial-form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.commercial-dialog fieldset, .commercial-config { min-width:0; border:1px solid var(--border); border-radius:12px; padding:16px; }
.commercial-dialog legend, .commercial-config legend { padding:0 6px; font-weight:700; color:var(--text); }
.commercial-week { display:grid; gap:10px; margin-top:12px; }
.commercial-week-row { display:grid; grid-template-columns:1.1fr .8fr 1.1fr; align-items:center; gap:10px; }
.commercial-check, #commercialDialogBody .commercial-check { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; }
.commercial-check input { flex:0 0 auto; width:18px; height:18px; }
.commercial-footer { display:flex; justify-content:flex-end; margin-top:20px; }
.horai-toast { position:relative; overflow:hidden; padding-bottom:16px; }
.toast-countdown { position:absolute; left:0; bottom:0; width:100%; height:3px; background:var(--primary,#1E4F8A); transform-origin:left; animation:toast-countdown var(--toast-duration,6000ms) linear forwards; }
@keyframes toast-countdown { to { transform:scaleX(0); } }
@media (prefers-reduced-motion:reduce) { .toast-countdown { animation-timing-function:steps(6); } }
.agenda-patient-card { padding:8px 10px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 8px; }
.agenda-patient-card > :first-child { grid-column:1 / -1; }
.agenda-patient-status { min-width:0; }
.agenda-patient-actions { justify-content:flex-end; }
.agenda-patient-actions button { min-height:30px; padding:4px 7px; font-size:11px; }
#editAgendSelectedClients .agenda-patient-card { padding:7px 9px; gap:4px 8px; }
#editAgendSelectedClients .agenda-patient-card button { min-height:30px; height:30px; padding:4px 7px; font-size:11px; }
#editAgendSelectedClients .agenda-patient-card > :first-child button { min-width:30px; width:30px; }
.agenda-hover-patient { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; font-size:12px; }
.agenda-hover-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.agenda-hover-badges { display:flex; align-items:center; gap:5px; flex-shrink:0; }
#editServicoMetaPreview.agenda-service-meta { text-align:center; font-size:13px; line-height:1.6; color:var(--primary); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin:8px 0 12px; }
#editAgendAddClientBox > :first-child { gap:16px; flex-wrap:wrap; }
.agenda-fill-vacancy { flex:1; min-width:110px; text-align:center; font-size:12px; color:var(--text-muted); line-height:1.5; padding:6px 8px; }
@media (max-width:600px) { .agenda-patient-card { grid-template-columns:1fr; } .agenda-patient-actions { justify-content:flex-start; } }
.commercial-config { margin:20px 0; background:var(--surface); }
#plansContent > h2 { font-weight:700; font-size:18px; margin:24px 0 12px; }
@media (max-width:600px) { .commercial-form-grid { grid-template-columns:1fr; } .commercial-week-row { grid-template-columns:1fr 1fr; } .commercial-week-row > :last-child { grid-column:1 / -1; } }