/* Temp cache-busting stylesheet — brand-new filename so it can never
   collide with a stale cached copy of style.css on the server/CDN.
   Convention: temp1.css -> temp2.css -> temp3.css... each new production
   caching workaround gets the next number, loaded last in app.blade.php.
   Move these rules back into style.css and delete this file (+ its <link>)
   once confirmed live and the caching issue is no longer a concern.
   (Renamed from temp15.css -> temp16.css -> temp17.css -> temp18.css ->
   temp19.css -> temp20.css to pick up this batch's fixes.) */

/* Online users dropdown — no max-height/scroll, shows the full list.
   Same fix already in style.css's .dropdown-menu.online-users-menu rule;
   duplicated here in case that copy is being served from a stale cache. */
.dropdown-menu.online-users-menu {
    max-height: none;
    overflow: hidden;
}

/* #main padding — same fix already in style.css; duplicated here in case
   that copy is being served from a stale cache. */
#main {
    padding: 30px 10px;
}

@media (max-width: 767.98px) {
    #main {
        padding: 5px 10px;
    }
}

/* EditClientModal.vue's Priority dropdown toggle button height — same fix
   already in clients.css; duplicated here in case that copy is being
   served from a stale cache. */
.wb-ele.priority-toggle-btn {
    height: 38px;
}

/* Dropdown menus (Bootstrap hardcodes blue for .dropdown-item's
   active/selected state and used a light-blue hover tint) now use the
   brand primary color instead — same fix already in style.css; duplicated
   here in case that copy is being served from a stale cache. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}
.dropdown-menu .dropdown-item:hover {
    background-color: rgba(164, 62, 67, .08);
}

/* Bolds an advisor select's text once a value is actually picked — same
   fix already in clients.css; duplicated here in case that copy is being
   served from a stale cache. */
.wb-ele.allocated.advisor-selected {
    font-weight: 700;
}

/* Booking Date widget (Clients/index.vue) — dimmed/unclickable state for a
   viewer who isn't the bucket's real current advisor, and matching Next
   Call's own rendered width — same fix already in clients.css; duplicated
   here in case that copy is being served from a stale cache. */
.wb-ele-booking-date.not-clickable {
    cursor: default;
    opacity: .65;
}
.dash-content .next-call-picker {
    width: 100%;
}

/* Header notification badge position — same fix already in style.css;
   duplicated here in case that copy is being served from a stale cache. */
.header-nav .badge-number {
    inset: 2px -21px auto auto;
}

/* Online-user avatar green border thickness — same fix already in
   style.css; duplicated here in case that copy is being served from a
   stale cache. */
.greenBorder {
    border: solid 3.3px #198754 !important;
}

/* CalendarBoard.vue's .calendar-toolbar overflowing/oversized on mobile,
   laid out as prev/month/next on row 1 and My Schedule toggle + Today on
   row 2 — same fix already in style.css; duplicated here in case that copy
   is being served from a stale cache. */
@media (max-width: 767.98px) {
  .calendar-toolbar {
    padding: 8px;
    gap: 8px;
  }

  .calendar-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "prev month next"
      "toggle toggle toggle";
    align-items: center;
    gap: 8px;
  }

  .calendar-nav-prev { grid-area: prev; justify-self: center; }
  .calendar-nav-next { grid-area: next; justify-self: center; }
  .calendar-nav-today { display: none; }
  .calendar-my-clients-toggle { grid-area: toggle; justify-self: center; margin: 8px 0 0; }

  .calendar-month-label {
    grid-area: month;
    min-width: 0;
    font-size: 16px;
  }

  .calendar-nav-btn {
    padding: 4px 8px;
    font-size: 13px;
  }
}

/* Bootstrap's own .bg-primary utility reads --bs-primary-rgb, which isn't
   reliably resolving to the brand color in every context — same explicit
   fallback treatment as .btn-primary. Same fix already in style.css;
   duplicated here in case that copy is being served from a stale cache. */
.bg-primary {
  background-color: #A43E43 !important;
}

/* NextCallPicker.vue — switched from a small anchored popup to a true
   centered modal dialog (matching the legacy CRM's "Pick Next Call"
   calendar), with a per-day badge count of the viewer's own scheduled next
   calls. Same rules already in style.css; duplicated here in case that
   copy is being served from a stale cache. */
.next-call-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.next-call-modal {
  background: #fff;
  border-radius: 8px;
  width: 700px;
  max-width: 100%;
  overflow: hidden;
}

.next-call-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: #A43E43;
  color: #fff;
}

.next-call-modal-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  min-width: 0;
}

.next-call-modal-body {
  padding: 16px;
}

.next-call-modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #eee;
}

/* Calendar grid — sized to match the legacy CRM's "Pick Next Call" modal
   (700px-wide dialog, flat 44px-tall day cells rather than a cramped
   square grid). Same rules already in style.css; duplicated here in case
   that copy is being served from a stale cache. */
.cal-grid {
  gap: 3px;
}

.cal-head {
  font-size: .7rem;
  font-weight: 700;
  color: #6b7a8d;
  padding: 5px 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cal-day-past {
  opacity: .45;
}

.cal-day {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 8px;
}

.cal-day-badge {
  position: absolute;
  top: -9px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #dc3545;
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.cal-day-selected .cal-day-badge {
  background: #fff;
  color: #A43E43;
  border: 1px solid #A43E43;
  font-size: 12px;
}

/* Dark mode — Pick Next Call modal. Same rules already in dark-mode.css;
   duplicated here in case that copy is being served from a stale cache. */
body.dark .next-call-modal { background: var(--bg-surface); }
body.dark .next-call-modal-body { color: var(--text-color); }
body.dark .next-call-modal-footer { border-top-color: var(--border-color); }

body.dark .next-call-modal-body .btn-light {
  background-color: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark .next-call-modal-body .btn-light:hover { background-color: var(--bg-surface-hover); }

body.dark .next-call-modal-footer .btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark .next-call-modal-footer .btn-outline-secondary:hover { background-color: var(--bg-surface-hover); }
body.dark .next-call-modal-footer .btn-secondary {
  background-color: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark .next-call-modal-footer .btn-secondary:hover { background-color: var(--bg-surface-hover); }

body.dark .cal-head { color: var(--text-muted); }
body.dark .cal-day { color: var(--text-color); }
body.dark .cal-day:hover { background: var(--bg-surface-hover); }
body.dark .cal-day-other { color: var(--text-muted); }

/* My Clients toggle (Clients/index.vue) — matches the row's other 38px-tall
   controls. Same fix already in clients.css; duplicated here in case that
   copy is being served from a stale cache. */
.my-clients-toggle {
  height: 38px;
}

/* NextCallPicker.vue's Preferred Call Time heart icon (.next-call-inner-icon)
   was using Vue SFC-only `:deep(*)` syntax in this plain global stylesheet,
   which browsers treat as an invalid selector and drop entirely — leaving
   the heart's pointer-events: none inherited from its parent, so clicks
   fell through to the underlying <input> and opened the Next Call modal
   instead of the Preferred Call Time alarm modal. Same fix already in
   style.css; duplicated here in case that copy is being served from a
   stale cache. */
.next-call-inner-icon * {
  pointer-events: auto;
}

/* --- Mobile fixes batch (2026-09-09) --- */

/* Give pagination / "records per page" controls clearance above the fixed
   bottom nav (~60px tall) instead of just raising their stacking order —
   same rule already in style.css; duplicated here in case that copy is
   being served from a stale cache. */
@media (max-width: 1199.98px) {
  .dataTables-footer,
  .dataTables_length,
  .dataTables-pagination,
  .pagination {
    margin-bottom: 25px;
  }
}

/* SearchableMultiSelect.vue's text input — Tailwind Forms' base reset
   ([type='text']{background-color:#fff}) loads later via @vite and ties
   this rule's specificity, so without !important it wins and paints the
   input opaque white on top of the dark-themed control div. Same fix
   already in style.css; duplicated here in case that copy is being served
   from a stale cache. */
.searchable-multiselect-input {
  background: transparent !important;
}

/* Bottom nav icon color — .bn-icon's own color:#000 directly matches the
   element, so it always beats the inherited (non-!important) color from
   .bn-link, and needs its own dark override too. Same fix already in
   style.css; duplicated here in case that copy is being served from a
   stale cache. */
body.dark .bn-icon { color: var(--text-muted); }
body.dark .bn-item.active .bn-icon { color: #fff; }

/* Toggle switches (Fished / mute-sound-notifications / etc.) had no dark
   override at all, so the unchecked track stayed Bootstrap's default
   white. Same fix already in dark-mode.css; duplicated here in case that
   copy is being served from a stale cache. */
body.dark .form-check-input:not(:checked) {
  background-color: var(--bg-surface-alt);
  border-color: var(--border-color);
}

/* Header background — darker shade for dark mode. Same fix already in
   dark-mode.css; duplicated here in case that copy is being served from a
   stale cache. */
body.dark .header {
  background: url(../img/pattern_background.png) #440b0e !important;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.4);
}

/* Quill editor toolbar icons (AddReportModal/EditReportModal etc.) — no
   dark override at all otherwise, so the SVG stroke stays Quill's default
   dark color and becomes invisible against a dark toolbar. Same fix
   already in dark-mode.css; duplicated here in case that copy is being
   served from a stale cache. */
body.dark .ql-stroke { stroke: #fff; }

/* Clients/index.vue Actions column — Called/Spoken/AI MSG/Brainstorm/
   Profile/Tags pills were packed into one unstyled row div inside the
   narrow col-lg-2 Actions column, so the row couldn't wrap cleanly. Called
   and Spoken also get a slightly larger tap target than the rest via
   .action-toggle-call (the AI/Tags pills are intentionally left at their
   original compact size). Same fix already in clients.css; duplicated here
   in case that copy is being served from a stale cache. */
.action-toggles { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.action-toggles-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; }
.action-toggle { white-space: nowrap; }
.action-toggle-call {
  font-size: clamp(10px, 0.85vw, 12.5px);
  padding: 0.4em 0.9em;
}

/* AddClientModal.vue's AI Fill button — restyled to the same gradient/glow/
   pulsing-ring look as AiAssistantFab.vue's round sticky icon. Same rules
   already in AddClientModal.vue's own <style scoped>; duplicated here
   (unscoped, so it matches on class name alone) in case that copy is being
   served from a stale cache. */
.ai-fill-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #A43E43, #6f42c1);
  box-shadow: 0 3px 12px rgba(111, 66, 193, .4);
  cursor: pointer;
  transition: box-shadow .15s ease, background .15s ease, opacity .15s ease;
  animation: ai-fill-float 3s ease-in-out infinite;
}

.ai-fill-btn:hover:not(:disabled) { box-shadow: 0 4px 16px rgba(111, 66, 193, .55); }
.ai-fill-btn:disabled { opacity: .75; cursor: not-allowed; }

.ai-fill-btn-recording {
  background: linear-gradient(135deg, #dc3545, #b02a37);
  box-shadow: 0 3px 12px rgba(220, 53, 69, .45);
}

.ai-fill-btn i,
.ai-fill-btn .spinner-border,
.ai-fill-label {
  position: relative;
  z-index: 1;
}

.ai-fill-btn i { animation: ai-fill-twinkle 2.4s ease-in-out infinite; }

.ai-fill-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(111, 66, 193, .5);
  animation: ai-fill-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

.ai-fill-btn-recording .ai-fill-ring { border-color: rgba(220, 53, 69, .55); }
.ai-fill-ring-delay { animation-delay: 1.1s; }

@keyframes ai-fill-pulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.12); opacity: 0; }
}

@keyframes ai-fill-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: .8; transform: scale(1.1) rotate(6deg); }
}

@keyframes ai-fill-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}