/* 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. */

/* 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); }