/* resources/css/filament-overrides.css (no @apply) */

/* No modal z-index overrides needed. The booking page blade template
   previously had inline CSS forcing fi-modal to z-9999 and
   fi-modal-close-overlay to z-9998, which broke the overlay/content
   stacking. Removed — Filament handles modals correctly by default. */

@media screen and (max-width: 640px) {

  .fc-daygrid-event .fc-event-time,
  .fc-daygrid-dot-event .fc-event-title {
    display: none;
  }

  .filament-fullcalendar .fc-toolbar {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 991px) {
  aside header button:last-of-type{
    display: block !important;
  }
}

/* ============================================
   DASHBOARD CUSTOMIZATION PAGES STYLING
   ============================================ */

/* Toggle Switches - Better dark mode focus ring */
.dark button[class*="rounded-full"]:focus {
  --tw-ring-offset-color: rgb(17 24 39);
}

/* Select Dropdowns - Proper dark mode styling */
select.dark\:bg-gray-800,
.dark select {
  color-scheme: dark;
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: rgb(31 41 55);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgb(75 85 99);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgb(107 114 128);
}

/* Dashboard tabs container styling */
.dashboard-tabs-container {
  background: white;
  border-radius: 0.75rem;
  padding: 0.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .dashboard-tabs-container {
  background: rgb(31 41 55);
}

/* Widget cards on settings pages */
.widget-card {
  transition: all 0.2s ease;
}

.widget-card:hover {
  transform: translateY(-1px);
}

/* Category badges color coding */
.category-badge-tickets {
  background-color: rgb(254 226 226);
  color: rgb(185 28 28);
}

.dark .category-badge-tickets {
  background-color: rgba(185, 28, 28, 0.2);
  color: rgb(252 165 165);
}

.category-badge-leads {
  background-color: rgb(254 249 195);
  color: rgb(161 98 7);
}

.dark .category-badge-leads {
  background-color: rgba(161, 98, 7, 0.2);
  color: rgb(253 224 71);
}

.category-badge-sales {
  background-color: rgb(220 252 231);
  color: rgb(22 101 52);
}

.dark .category-badge-sales {
  background-color: rgba(22, 101, 52, 0.2);
  color: rgb(134 239 172);
}

.category-badge-surveys {
  background-color: rgb(219 234 254);
  color: rgb(30 64 175);
}

.dark .category-badge-surveys {
  background-color: rgba(30, 64, 175, 0.2);
  color: rgb(147 197 253);
}

.category-badge-general {
  background-color: rgb(243 244 246);
  color: rgb(55 65 81);
}

.dark .category-badge-general {
  background-color: rgba(55, 65, 81, 0.3);
  color: rgb(209 213 219);
}

/* Improved button focus states */
button:focus-visible {
  outline: 2px solid rgb(59 130 246);
  outline-offset: 2px;
}

.dark button:focus-visible {
  outline-color: rgb(96 165 250);
}

/* ============================================
   DASHBOARD HERO BANNER TEXT COLORS
   ============================================ */

/* Light mode - dark text */
.dashboard-hero-banner .dashboard-hero-title {
  color: #1e3a5f !important;
  -webkit-text-fill-color: #1e3a5f !important;
}

.dashboard-hero-banner .dashboard-hero-subtitle {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Dark mode - white/light text */
.dark .dashboard-hero-banner .dashboard-hero-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.dark .dashboard-hero-banner .dashboard-hero-subtitle {
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
}

/* Icon in hero banner */
.dashboard-hero-banner .fi-icon,
.dashboard-hero-banner svg {
  color: #1e3a5f !important;
}

.dark .dashboard-hero-banner .fi-icon,
.dark .dashboard-hero-banner svg {
  color: white !important;
}

/* ============================================
   BRAND LOGO STYLING
   ============================================ */

/* Style the brand logo in sidebar */
.fi-sidebar-header img,
.fi-logo img {
  border-radius: 0.5rem;
  object-fit: contain;
}

/* Add subtle shadow in light mode */
.fi-sidebar-header img {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.dark .fi-sidebar-header img {
  box-shadow: none;
}

/* ============================================
   WHATSAPP INBOX — missing Tailwind utilities
   ============================================
   The WhatsApp Inbox is a custom Filament page whose Blade view uses a few
   Tailwind utilities that are NOT in Filament's compiled CSS (this panel has
   no custom Filament theme registered — Filament only ships the utilities it
   uses itself). Without `.w-80` the conversation-list flex item has no width
   constraint: on the "All" view its min-content (driven by long message
   previews) grows to ~1700px, which squeezes the thread pane to ~0px — so a
   clicked conversation renders into an invisible column and the page looks
   stuck on the list. These definitions restore the intended 3-pane layout.
   (Proper long-term fix: register a custom Filament theme so the panel's own
   Tailwind build generates these. Tracked separately.) */
.w-80 { width: 20rem; }
.max-h-64 { max-height: 16rem; }
.rounded-2xl { border-radius: 1rem; }
.max-w-\[70\%\] { max-width: 70%; }

@media (min-width: 1024px) {
  .lg\:block { display: block; }
}

/* Search box: the magnifying-glass icon is absolutely positioned and the input
   uses `pl-8` to clear it. Those utilities aren't in Filament's build, so the
   placeholder text overlapped the icon. Restore the icon position + input
   padding (scoped to the inbox search wrapper to avoid touching other inputs). */
.fi-main .relative > .pointer-events-none.absolute {
  pointer-events: none;
  position: absolute;
}
.fi-main input.pl-8 { padding-left: 2rem; }
.fi-main input.pr-3 { padding-right: 0.75rem; }
.fi-main .left-2\.5 { left: 0.625rem; }
.fi-main .top-1\/2 { top: 50%; }
.fi-main .-translate-y-1\/2 { transform: translateY(-50%); }
.fi-main .h-4 { height: 1rem; }
.fi-main .w-4 { width: 1rem; }
.placeholder-gray-400::placeholder { color: #9ca3af; }