/* 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 -> temp21.css -> temp22.css -> temp23.css ->
   temp24.css -> temp25.css -> temp26.css -> temp27.css -> temp28.css ->
   temp29.css -> temp30.css -> temp31.css -> temp32.css -> temp33.css ->
   temp34.css -> temp35.css -> temp36.css -> temp37.css -> temp38.css ->
   temp39.css -> temp40.css -> temp41.css -> temp42.css to pick up this batch's fixes.) */

/* Per-user primary color themes — picked on the profile page (see
   Profile/Edit.vue, ProfileController::setThemeColor()) and rendered
   server-side as <html data-theme="..."> in app.blade.php. Every brand-red
   usage across style.css/clients.css/all.css reads these variables instead
   of a hardcoded hex. 'red' (the original brand color) is the :root default
   in style.css, repeated here in case that file is served stale.
   html[data-theme] (0,1,1) outranks the :root (0,1,0) defaults in
   style.css/clients.css regardless of load order. */
:root,
html[data-theme="red"] {
  --color1: #A43E43;
  --color1-rgb: 164, 62, 67;
  --color1-hover: #8a3438;
  --color1-dark: #972a2f;
  --color1-deep: #8b1e23;
  --color2: #6f2a2e;
  --color1-night: #440b0e;
}
html[data-theme="blue"] {
  --color1: #1F4E79;
  --color1-rgb: 31, 78, 121;
  --color1-hover: #1a4266;
  --color1-dark: #1c4770;
  --color1-deep: #173c5f;
  --color2: #122f4a;
  --color1-night: #0b1f33;
}
html[data-theme="green"] {
  --color1: #2E7D4F;
  --color1-rgb: 46, 125, 79;
  --color1-hover: #276a43;
  --color1-dark: #2a7349;
  --color1-deep: #24623e;
  --color2: #1c4d31;
  --color1-night: #0b2a18;
}
html[data-theme="purple"] {
  --color1: #6A3D8F;
  --color1-rgb: 106, 61, 143;
  --color1-hover: #5a3479;
  --color1-dark: #623884;
  --color1-deep: #553073;
  --color2: #43265b;
  --color1-night: #24133a;
}
html[data-theme="teal"] {
  --color1: #00838F;
  --color1-rgb: 0, 131, 143;
  --color1-hover: #006f79;
  --color1-dark: #007982;
  --color1-deep: #00666f;
  --color2: #00525a;
  --color1-night: #002a2e;
}
html[data-theme="pink"] {
  --color1: #C2185B;
  --color1-rgb: 194, 24, 91;
  --color1-hover: #a4144d;
  --color1-dark: #ad1551;
  --color1-deep: #99124a;
  --color2: #7a0e3b;
  --color1-night: #3d071e;
}
html[data-theme] {
  --bs-primary: var(--color1);
  --bs-primary-rgb: var(--color1-rgb);
}

/* .hideMob/.hideWeb's @media (max-width: 992px) toggle — same rule already
   in clients.css (lines ~369-373), duplicated here because a client
   reported BOTH the desktop-only "select all" header row and the new
   mobile-only "Select all" row (Clients/index.vue) rendering at once on
   their phone, meaning the media query itself wasn't taking effect there —
   consistent with a stale cached clients.css rather than a logic bug. */
.hideMob { display: block; }
.hideWeb { display: none !important; }
@media (max-width: 992px) {
    .hideMob { display: none !important; }
    .hideWeb { display: block !important; }
}

/* 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(var(--color1-rgb), .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: var(--color1) !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: var(--color1);
  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: var(--color1);
  border: 1px solid var(--color1);
  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) var(--color1-night) !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.5em 1.2em;
}

/* 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, var(--color1), #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); }
}

/* admin.root-only "view a specific advisor's board" select
   (CalendarBoard.vue), above the legend. Same rule already in style.css;
   duplicated here in case that copy is being served from a stale cache. */
.calendar-board-user {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.calendar-board-user select {
  max-width: 260px;
}

/* Clients/index.vue toolbar's Next Call date-range dropdown — redesigned
   from a stacked single-column layout to From/To side by side, with a
   small title header. Same rules already in clients.css; duplicated here
   in case that copy is being served from a stale cache. */
.next-call-range-menu {
    min-width: 300px;
    padding: 12px !important;
}
.next-call-range-title {
    font-size: 12px;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.next-call-range-fields {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.next-call-range-field {
    flex: 1 1 0;
    min-width: 0;
}
.toolbar-date-label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 600;
    margin-bottom: 4px;
}
body.dark .next-call-range-title { color: var(--text-color); border-bottom-color: var(--border-color); }
body.dark .toolbar-date-label { color: var(--text-muted); }

/* Booking Date box (Clients/index.vue) — fixed centered width instead of
   stretching full-width via .wb-ele's own width:100%, and the "No bookings
   yet" (field-unset) state now matches NextCallPicker's own "value set"
   green look instead of the generic red/pink .field-unset warning tint.
   Same rules already in clients.css; duplicated here in case that copy is
   being served from a stale cache. */
.wb-ele-booking-date { width: 100%; margin: auto; }
.wb-ele.wb-ele-booking-date.field-unset {
    background-color: #f0fff5 !important;
    border-color: #198754 !important;
}

/* --- New batch (2026-09-10) --- */

/* Country of residence field's include/exclude toggle (ClientFiltersModal.vue)
   — same rules already in style.css; duplicated here in case that copy is
   being served from a stale cache. Two always-visible Include/Exclude
   buttons (not a checkbox switch, which looked "off" in its default
   Include state) — whichever mode is active gets a filled background. */
.country-negate-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.country-negate-row .country-negate-select {
  flex: 1 1 auto;
  min-width: 0;
}

.country-negate-row .country-negate-select .searchable-multiselect-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.country-negate-switch {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-left: none;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  max-height: 47px;
}

.country-negate-option {
  flex: 1;
  border: none;
  background: transparent;
  color: #888;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.country-negate-option + .country-negate-option {
  border-top: 1px solid #ddd;
}

.country-negate-option:hover:not(.active) {
  background: rgba(0, 0, 0, .05);
}

.country-negate-option.active {
  color: #fff;
}

.country-negate-option:not(.negate).active {
  background: #0d6222;
}

.country-negate-option.negate.active {
  background: var(--color1-dark);
}

body.dark .country-negate-switch {
  border-color: var(--border-color);
}

body.dark .country-negate-option {
  color: var(--text-muted);
}

body.dark .country-negate-option + .country-negate-option {
  border-top-color: var(--border-color);
}

body.dark .country-negate-option:hover:not(.active) {
  background: var(--bg-surface-hover);
}

/* --- New batch (2026-09-10) --- */

/* Clients by Country map (WorldMapChart.vue) — marker/count-label color
   switched from Bootstrap's default blue to the brand primary color, plus
   the new "Property Turkey / is everywhere" branding label anchored in open
   ocean. Same rules already in resources/css/all.css (compiled into the
   Vite bundle); duplicated here in case that copy is being served from a
   stale cache — unlike the rest of this file, all.css is normally immune to
   that (each build gets a unique content-hashed filename), so this is only
   an extra safety net, not a known-affected file. */
.world-map-count-label {
    background: var(--color1);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 11px;
    padding: 1px 6px;
    box-shadow: none;
}

.world-map-count-label::before {
    border-top-color: var(--color1);
}

.leaflet-div-icon.world-map-brand-icon {
    background: transparent;
    border: none;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
    white-space: nowrap;
}

.world-map-brand-name {
    font-family: 'Inter', sans-serif;
    color: var(--color1);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .85), 0 0 6px rgba(255, 255, 255, .65);
    line-height: 1.3;
}

.world-map-brand-tagline {
    font-family: 'Inter', sans-serif;
    color: var(--color1);
    font-weight: 300;
    font-style: italic;
    font-size: 16px;
    letter-spacing: .5px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .85), 0 0 6px rgba(255, 255, 255, .65);
    line-height: 1.3;
}

/* --- New batch (2026-09-11) --- */

/* Clients mobile card view (MobileClientCard.vue) — same rules already in
   resources/css/clients-mobile.css (compiled into the Vite bundle);
   duplicated here in case that copy is being served from a stale cache —
   like all.css above, clients-mobile.css is normally immune to that (each
   build gets a unique content-hashed filename), so this is only an extra
   safety net, not a known-affected file. */

.mcc-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px 2px;
}

.mcc-mobile-toolbar{
  align-items:center;
  min-height:32px;
}
.mcc-toolbar-select{
  flex:0 0 auto;
  gap:4px;
}
.mcc-toolbar-title{
  flex:1;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}

.mcc-card{
  border:1px solid #e6e6e6;
  border-top:8px solid #888;
  border-radius:12px;
  background:#fff;
  position:relative;
}
.mcc-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
}
.mcc-card.mcc-pri-high{border-top-color:red;}
.mcc-card.mcc-pri-med{border-top-color:#ff9d00;}
.mcc-card.mcc-pri-low{border-top-color:#eaff00;}
.mcc-card.mcc-pri-gray{border-top-color:#888;}
.mcc-card.mcc-pri-high::before{background:red;}
.mcc-card.mcc-pri-med::before{background:#ff9d00;}
.mcc-card.mcc-pri-low::before{background:#eaff00;}
.mcc-card.mcc-pri-gray::before{background:#888;}
.mcc-card.mcc-deleted{opacity:.65;}

.mcc-main{
  padding:10px 12px 10px 16px;
  cursor:pointer;
}
.mcc-top{
  display:flex;
  align-items:center;
  gap:7px;
}
.mcc-top input[type=checkbox]{
  width:17px;height:17px;
  flex-shrink:0;
  accent-color:var(--color1);
}
.mcc-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.mcc-dot.high{background:red;}
.mcc-dot.med{background:#ff9d00;}
.mcc-dot.low{background:#eaff00;}
.mcc-dot.gray{background:#888;}

.mcc-id{color:#888;font-size:12.5px;flex-shrink:0;}
.mcc-name{
  font-weight:700;
  font-size:14.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
  color:#222;
}
.mcc-edit-btn{
  width:24px;height:24px;
  border:none;background:transparent;
  color:var(--color1);
  font-size:13px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.mcc-badge-icon{font-size:13px;flex-shrink:0;}
.mcc-badge-icon.new{color:#ff9d00;}
.mcc-badge-icon.realloc{color:#4a9fe0;}
.mcc-deleted-tag{color:#dc3545;font-size:11px;font-weight:700;flex-shrink:0;}

.mcc-expand-toggle{
  width:26px;height:26px;
  border:none;background:#f5f5f5;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:#888;
  flex-shrink:0;
  transition:transform .2s ease;
}
.mcc-card.mcc-expanded .mcc-expand-toggle{transform:rotate(180deg);}

.mcc-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:6px;padding-left:25px;
  font-size:12px;color:#888;
}
.mcc-meta .sep{color:#ddd;}
.mcc-chip{background:#f5f5f5;border-radius:6px;padding:2px 7px;font-size:11px;color:#333;}
.mcc-chip.unset{color:#dc3545;background:#fdecea;border:1px solid #f5c2c7;}

.mcc-contact-row{display:flex;gap:6px;margin-top:8px;padding-left:25px;flex-wrap:wrap;}
.mcc-pill{
  display:flex;align-items:center;gap:5px;
  background:#f5f5f5;border-radius:8px;padding:5px 9px;
  font-size:12px;color:#333;text-decoration:none;line-height:1;
}
.mcc-pill .bi-telephone-fill{color:#30b260;}
.mcc-pill .bi-envelope{color:#4a9fe0;}
.mcc-pill.mcc-wa{color:#30b260;}
.mcc-pill .mcc-wa-dot{width:6px;height:6px;border-radius:50%;background:#30b260;display:inline-block;}

.mcc-nextcall{display:flex;align-items:center;gap:6px;margin-top:8px;padding-left:25px;font-size:12px;color:#333;}
.mcc-nextcall i{color:var(--color1);}
.mcc-nextcall.mcc-muted{color:#888;}
.mcc-due-badge{background:#dc3545;color:#fff;font-size:10.5px;padding:2px 7px;border-radius:20px;font-weight:600;}
.mcc-overdue-badge{background:#fdecea;color:#dc3545;border:1px solid #f5c2c7;font-size:10.5px;padding:2px 7px;border-radius:20px;font-weight:600;}

.mcc-advisors{display:flex;gap:6px;margin-top:8px;padding-left:25px;flex-wrap:wrap;}
.mcc-advisor-chip{font-size:11px;padding:3px 8px;border-radius:20px;background:color-mix(in srgb, var(--color1) 12%, #fff);color:var(--color2);display:flex;align-items:center;gap:4px;}
.mcc-advisor-chip.mcc-unassigned{background:#f5f5f5;color:#888;}
.mcc-advisor-chip.mcc-pending{background:#fff4e0;color:#a15c00;}
.mcc-tag-chip{font-size:11px;padding:3px 9px;border-radius:14px;background:#eee;color:#333;display:flex;align-items:center;gap:4px;}

.mcc-quickbar{display:flex;border-top:1px solid #e6e6e6;}
.mcc-quickbar button,
.mcc-quickbar a{
  flex:1;border:none;background:#fff;padding:10px 0;font-size:16px;color:#888;
  border-right:1px solid #e6e6e6;display:flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;
}
.mcc-quickbar button:last-child, .mcc-quickbar a:last-child{border-right:none;}
.mcc-quickbar .mcc-call{color:var(--color1);}
.mcc-quickbar .mcc-wa-btn{color:#30b260;}
.mcc-quickbar button:active, .mcc-quickbar a:active{background:#f5f5f5;}
.mcc-quickbar button:disabled{opacity:.4;}

.mcc-detail{border-top:1px solid #e6e6e6;background:#fbfbfb;}

.mcc-tabs{display:flex;padding:8px 8px 0;gap:4px;}
.mcc-tabs button{
  flex:1;border:none;background:transparent;padding:8px 4px;font-size:11px;
  color:#707070;border-bottom:2px solid transparent;
  display:flex;align-items:center;justify-content:center;gap:4px;
  text-transform:uppercase;letter-spacing:.3px;font-weight:700;
}
.mcc-tabs button.mcc-active{color:var(--color1);border-bottom-color:var(--color1);}
.mcc-tabs button .mcc-cnt{background:#f5f5f5;border-radius:20px;padding:0 5px;font-size:10px;text-transform:none;font-weight:600;}
.mcc-tabs button.mcc-active .mcc-cnt{background:var(--color1);color:#fff;}

.mcc-panel{padding:12px 14px 14px;font-size:12.5px;}

.mcc-field-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed #e6e6e6;}
.mcc-field-row:last-child{border-bottom:none;}
.mcc-field-label{color:#888;font-size:12px;display:flex;align-items:center;gap:5px;}
.mcc-field-value{font-weight:600;text-align:right;}
.mcc-select{
  border:1px solid #198754;background:#f0fff5;border-radius:8px;padding:5px 8px;
  font-size:12px;color:#333;max-width:170px;
}
.mcc-select.mcc-unset{border-color:#f5c2c7;background:#fdecea;}
.mcc-select.w-100{max-width:none;}
.next-call-input-wrap input.mcc-select.has-inner-icon{padding-right:26px;}
.mcc-status-dropdown .dropdown-menu,
.mcc-source-dropdown .dropdown-menu{width:200px !important;}
.mcc-unset-flag{color:#dc3545;font-size:11px;display:flex;align-items:center;gap:4px;}

.mcc-note-preview{background:#f5f5f5;border-radius:10px;padding:10px;font-size:12px;line-height:1.5;}
.mcc-note-meta{display:flex;justify-content:space-between;color:#888;font-size:11px;margin-top:6px;}
.mcc-add-note-btn{display:flex;align-items:center;gap:5px;color:var(--color1);font-size:12.5px;font-weight:600;margin-bottom:10px;background:none;border:none;padding:0;}
.mcc-note-item{border:1px solid #eee;border-radius:8px;padding:10px;margin-bottom:8px;background:#fff;font-size:12px;}
.mcc-note-item-head{display:flex;justify-content:space-between;color:#888;font-size:11px;margin-bottom:4px;}
.mcc-note-item-actions{display:flex;gap:8px;margin-top:6px;}
.mcc-note-item-actions button{border:none;background:#f5f5f5;border-radius:6px;padding:4px 8px;font-size:11px;color:#555;}

.mcc-toggle-row{display:flex;gap:8px;margin:8px 0;}
.mcc-toggle-pill{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid #e6e6e6;border-radius:8px;padding:7px 0;font-size:12px;color:#888;background:#fff;
}

.mcc-toggle-pill.mcc-done{background:var(--green) !important;;border-color:#198754;color:#f0fff5;font-weight:600;}
.mcc-toggle-pill:disabled{opacity:.5;}


.mcc-ai-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.mcc-ai-btn{
  flex:1 1 30%;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid #e6e6e6;border-radius:8px;padding:8px 4px;font-size:10.5px;
  color:var(--color2);background:color-mix(in srgb, var(--color1) 7%, #fff);
}
.mcc-ai-btn i{font-size:15px;}

.mcc-alloc-block{padding:10px 0;border-bottom:1px solid #e6e6e6;}
.mcc-alloc-block:last-child{border-bottom:none;}
.mcc-alloc-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;font-size:12px;color:#888;margin-bottom:5px;}
.mcc-alloc-name{font-weight:700;font-size:13px;text-align:center;}
.mcc-alloc-name.mcc-unassigned{color:#888;font-weight:400;}
.mcc-alloc-actions{display:flex;gap:8px;margin-top:4px;}
.mcc-link-action{font-size:11.5px;color:var(--color1);text-decoration:underline;background:none;border:none;padding:0;}
.mcc-link-action.mcc-danger{color:#dc3545;}
.mcc-accept-reject{display:flex;gap:6px;margin-top:6px;}
.mcc-accept-reject button{flex:1;border:none;border-radius:6px;padding:6px 0;font-size:11px;color:#fff;}
.mcc-accept-reject .mcc-accept{background:#30b260;}
.mcc-accept-reject .mcc-reject{background:#dc3545;}
.mcc-pending-note{color:#a15c00;font-size:11px;}

body.dark .mcc-card{background:var(--bg-surface);border-color:var(--border-color);}
body.dark .mcc-name{color:var(--text-color);}
body.dark .mcc-id,
body.dark .mcc-meta,
body.dark .mcc-nextcall.mcc-muted{color:var(--text-muted);}
body.dark .mcc-meta .sep{color:var(--border-color);}
body.dark .mcc-expand-toggle{background:var(--bg-surface-alt);color:var(--text-muted);}
body.dark .mcc-chip{background:var(--bg-surface-alt);color:var(--text-color);}
body.dark .mcc-chip.unset{background:rgba(220,53,69,.15);border-color:rgba(220,53,69,.4);color:#e8828d;}
body.dark .mcc-pill{background:var(--bg-surface-alt);color:var(--text-color);}
body.dark .mcc-nextcall{color:var(--text-color);}
body.dark .mcc-overdue-badge{background:rgba(220,53,69,.15);border-color:rgba(220,53,69,.4);color:#e8828d;}
body.dark .mcc-advisor-chip{background:rgba(var(--color1-rgb), .2);color:color-mix(in srgb, var(--color1) 45%, #fff);}
body.dark .mcc-advisor-chip.mcc-unassigned{background:var(--bg-surface-alt);color:var(--text-muted);}
body.dark .mcc-advisor-chip.mcc-pending{background:rgba(255,193,7,.15);color:#e0b04a;}
body.dark .mcc-tag-chip{background:var(--bg-surface-alt);color:var(--text-color);}
body.dark .mcc-quickbar{border-color:var(--border-color);}
body.dark .mcc-quickbar button,
body.dark .mcc-quickbar a{background:var(--bg-surface);color:var(--text-muted);border-color:var(--border-color);}
body.dark .mcc-quickbar button:active,
body.dark .mcc-quickbar a:active{background:var(--bg-surface-hover);}
body.dark .mcc-detail{background:var(--bg-surface-alt);border-color:var(--border-color);}
body.dark .mcc-tabs button{color:var(--text-muted);}
body.dark .mcc-tabs button .mcc-cnt{background:var(--bg-surface);color:var(--text-muted);}
body.dark .mcc-field-row{border-color:var(--border-color);}
body.dark .mcc-field-label{color:var(--text-muted);}
body.dark .mcc-field-value{color:var(--text-color);}
body.dark .mcc-select{background:rgba(25,135,84,.15);border-color:#198754;color:var(--text-color);}
body.dark .mcc-select.mcc-unset{background:rgba(220,53,69,.15);border-color:rgba(220,53,69,.4);}
body.dark .mcc-note-preview{background:var(--bg-surface-alt);color:var(--text-color);}
body.dark .mcc-note-meta{color:var(--text-muted);}
body.dark .mcc-note-item{background:var(--bg-surface);border-color:var(--border-color);color:var(--text-color);}
body.dark .mcc-note-item-head{color:var(--text-muted);}
body.dark .mcc-note-item-actions button{background:var(--bg-surface-alt);color:var(--text-muted);}
body.dark .mcc-toggle-pill{background:var(--bg-surface);border-color:var(--border-color);color:var(--text-muted);}
body.dark .mcc-toggle-pill.mcc-done{background:rgba(25,135,84,.15);border-color:#198754;color:#3ec97f;}
body.dark .mcc-ai-btn{background:rgba(var(--color1-rgb), .15);border-color:var(--border-color);color:color-mix(in srgb, var(--color1) 45%, #fff);}
body.dark .mcc-alloc-block{border-color:var(--border-color);}
body.dark .mcc-alloc-head{color:var(--text-muted);}
body.dark .mcc-alloc-name{color:var(--text-color);}
body.dark .mcc-alloc-name.mcc-unassigned{color:var(--text-muted);}
body.dark .mcc-top input[type=checkbox]{
  color-scheme:dark;
  background-color:var(--bg-surface-alt);
  border-color:var(--border-color);
}

/* Tag chips now render inside the SearchableMultiSelect control box itself
   (resources/js/Components/SearchableMultiSelect.vue) instead of in a
   separate row below it. Same fix already in style.css; duplicated here in
   case that copy is being served from a stale cache. */
.searchable-multiselect-control {
  cursor: text;
  padding: .25rem .5rem !important;
  font-size: 13px !important;
  height: auto !important;
  min-height: 38px;
}
.searchable-multiselect-control .tag-chip {
  margin: 0;
}
.searchable-multiselect-input {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  padding: 0;
  font-size: 13px;
  background: transparent !important;
}

/* NextCallPicker.vue's day-cell treatment, ported to match legacy ptcrm's
   "Pick Next Call" calendar (calender_modal4.css) exactly: gray tile bg +
   hover scale, "today"/"selected" as non-competing box-shadow/outline
   rather than background fills, has-calls fills the whole cell red with
   the count as small text under the day number instead of a floating
   corner badge. Same fix already in style.css/dark-mode.css; duplicated
   here in case those copies are being served from a stale cache. */
.cal-day {
  flex-direction: column;
  background: #f0f3f7;
  transition: background .15s, transform .1s;
  user-select: none;
}
.cal-day:hover {
  background: #dde3eb;
  transform: scale(1.06);
}
.cal-day-num {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
}
.cal-day-other {
  background: transparent !important;
  cursor: default;
  transform: none !important;
}
.cal-day-other .cal-day-num {
  color: #c8d0da;
}
.cal-day-other:hover {
  background: transparent !important;
  transform: none !important;
}
.cal-day-today {
  box-shadow: 0 0 0 2px #0d6efd;
}
.cal-day-today .cal-day-num {
  color: #0d6efd;
  font-weight: 800;
}
.cal-day-selected {
  outline: 3px solid #ff9800;
  outline-offset: 1px;
}
.cal-day-past:not(.cal-day-other) {
  opacity: .45;
  cursor: default;
}
.cal-day-past:not(.cal-day-other):hover {
  transform: none !important;
}
.cal-day-has-calls {
  background: #e53935 !important;
}
.cal-day-has-calls .cal-day-num {
  color: #fff !important;
  font-weight: 700;
}
.cal-day-has-calls:hover {
  background: #b71c1c !important;
}
.cal-day-past.cal-day-has-calls:hover {
  background: #e53935 !important;
}
.cal-day-badge {
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  line-height: 1;
  margin-top: 1px;
}
body.dark .cal-day { background: var(--bg-surface-alt); color: var(--text-color); }
body.dark .cal-day:hover { background: var(--bg-surface-hover); }
body.dark .cal-day-other { background: transparent !important; }
body.dark .cal-day-other .cal-day-num { color: var(--text-muted); }

/* Top 10 Call Center Performance — third "Bookings" bar/legend dot added
   alongside the existing Called/Spoken ones. Same rules already in
   style.css; duplicated here in case that copy is being served from a
   stale cache. */
.tcc-dot-bookings { background: #f6c23e; }
.tcc-bar-bookings { background: #f6c23e; }

/* Top 10 Call Center Performance — divider line under each advisor row so
   the 10 rows are visually separated, white in dark mode, spacing kept as
   tight as possible (no extra padding, just the list's own row gap). Same
   rules already in style.css; duplicated here in case that copy is being
   served from a stale cache. */
.tcc-list {
  gap: 6px;
}
.tcc-row {
  padding-bottom: 0;
  border-bottom: 1px solid #e9ecef;
}
.tcc-row:last-child {
  border-bottom: none;
}
body.dark .tcc-row { border-bottom-color: #fff; }

/* FER modal's WhatsApp/Email preview — "Looks good!" flow (FerModal.vue,
   WhatsAppPreview.vue, EmailPreview.vue, MessagePreviewModal.vue). */
.btn-preview {
  background: #6f42c1;
  border-color: #6f42c1;
  color: #fff;
}
.btn-preview:hover,
.btn-preview:focus,
.btn-preview:active {
  background: #5c34a3;
  border-color: #5c34a3;
  color: #fff;
}

.whatsapp-preview {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dfe4ea;
  background: #e5ddd5;
}
.whatsapp-preview-header {
  background: #075e54;
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.whatsapp-preview-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.whatsapp-preview-name {
  font-weight: 600;
  line-height: 1.2;
}
.whatsapp-preview-phone {
  font-size: 0.75rem;
  opacity: 0.85;
}
.whatsapp-preview-body {
  padding: 16px;
  min-height: 180px;
}
.whatsapp-preview-bubble {
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 85%;
  margin-left: auto;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  white-space: normal;
  word-break: break-word;
}
.whatsapp-preview-bubble + .whatsapp-preview-bubble {
  margin-top: 10px;
}
.whatsapp-preview-placeholder {
  color: #8696a0;
  font-style: italic;
}
.whatsapp-preview-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #075e54;
}
.whatsapp-preview-timestamp {
  text-align: right;
  font-size: 0.75rem;
  color: #667781;
  margin-top: 4px;
}
.whatsapp-preview-link-card {
  padding: 0;
  overflow: hidden;
}
.whatsapp-preview-link-img {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  display: block;
}
.whatsapp-preview-link-body {
  padding: 8px 12px;
}
.whatsapp-preview-link-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #111b21;
}
.whatsapp-preview-link-price {
  font-size: 0.8rem;
  color: #075e54;
  font-weight: 600;
}
.whatsapp-preview-link-url {
  font-size: 0.75rem;
  color: #8696a0;
  margin-top: 2px;
  word-break: break-all;
}

/* Mirrors WhatsApp's own dark theme palette rather than the app's generic
   dark-mode vars, since this preview is meant to look like the real app. */
body.dark .whatsapp-preview {
  border-color: #2e3846;
  background: #0b141a;
}
body.dark .whatsapp-preview-header {
  background: #202c33;
}
body.dark .whatsapp-preview-avatar {
  background: rgba(255, 255, 255, 0.08);
}
body.dark .whatsapp-preview-bubble {
  background: #005c4b;
  color: #e9edef;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
body.dark .whatsapp-preview-placeholder {
  color: #8696a0;
}
body.dark .whatsapp-preview-voice {
  color: #e9edef;
}
body.dark .whatsapp-preview-link-title,
body.dark .whatsapp-preview-link-price {
  color: #e9edef;
}

.email-preview {
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.email-preview-meta {
  padding: 12px 20px;
  background: #f8f9fc;
  border-bottom: 1px solid #dfe4ea;
  font-size: 0.85rem;
}
.email-preview-row + .email-preview-row {
  margin-top: 2px;
}
.email-preview-label {
  color: #858796;
  font-weight: 600;
  margin-right: 4px;
}
.email-preview-body {
  padding: 24px;
  min-height: 200px;
}
.email-preview-subject {
  color: #16324f;
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.email-preview-content {
  color: #1f2d3d;
  font-size: 0.95rem;
  line-height: 1.6;
  word-break: break-word;
}

body.dark .email-preview {
  border-color: var(--border-color);
  background: var(--bg-surface);
}
body.dark .email-preview-meta {
  background: var(--bg-surface-alt);
  border-bottom-color: var(--border-color);
}
body.dark .email-preview-label {
  color: var(--text-muted);
}
body.dark .email-preview-subject,
body.dark .email-preview-content {
  color: var(--text-color);
}

/* --- resources/js/Components/Modals/Ai/PropertyPickerModal.vue --- */
.ai-prop-card-pickable {
  position: relative;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.ai-prop-card-pickable:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ai-prop-card-picked {
  border-color: #28a745 !important;
}
.ai-prop-card-picked-icon {
  position: absolute;
  top: 6px;
  left: 6px;
  color: #28a745;
  background: #fff;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  z-index: 1;
}

body.dark .ai-prop-card-picked-icon {
  background: var(--bg-surface);
}

/* --- New batch (2026-09-23) --- */

/* Coaching Messages modal chat bubbles (CoachingMessagesModal.vue) — no
   dark override at all, so the light gray/blue bubble backgrounds stayed
   light while the surrounding dark-mode text turned light too, reading as
   unreadable light-on-light. Same rules already in dark-mode.css;
   duplicated here in case that copy is being served from a stale cache. */
body.dark .cm-bubble { background: var(--bg-surface-alt); color: var(--text-color); }
body.dark .cm-turn-admin .cm-bubble { background: var(--bg-surface-alt); color: var(--text-color); }
body.dark .cm-bubble-failed { border-color: #ff6b64; }

/* Online users dropdown — list capped at ~10 rows (46px each), the rest
   scroll; header stays put above it. Same rule already in style.css;
   duplicated here in case that copy is being served from a stale cache. */
.online-users-list {
    max-height: 460px;
    overflow-y: auto;
}

/* --- New batch (2026-09-28) --- */

/* AI MSG modal (FerModal.vue) — "Send to" WhatsApp recipient picker under
   the send buttons: one selectable chip per client number (mobile/phone),
   the active one highlighted WhatsApp-green with a check mark. */
.ai-wts-to {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ai-wts-to-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}
.ai-wts-to-label .bi-whatsapp {
    color: #25d366;
    font-size: 14px;
}
.ai-wts-to-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ai-wts-to-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1.4;
    color: #555;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.ai-wts-to-option:hover {
    border-color: #25d366;
}
.ai-wts-to-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .25);
}
.ai-wts-to-option.active {
    color: #128c4a;
    background: #e9f9ef;
    border-color: #25d366;
    box-shadow: 0 0 0 1px #25d366 inset;
}
.ai-wts-to-type {
    color: #888;
}
.ai-wts-to-option.active .ai-wts-to-type {
    color: #128c4a;
}
.ai-wts-to-number {
    font-weight: 600;
    letter-spacing: .02em;
    unicode-bidi: isolate;
}
.ai-wts-to-check {
    color: #25d366;
}
.ai-wts-to-empty {
    font-size: 12px;
    color: #dc3545;
}
body.dark .ai-wts-to-label { color: var(--text-muted); }
body.dark .ai-wts-to-option {
    background: var(--bg-surface-alt);
    border-color: var(--border-color);
    color: var(--text-muted);
}
body.dark .ai-wts-to-option:hover { border-color: #25d366; }
body.dark .ai-wts-to-option.active {
    background: rgba(37, 211, 102, .12);
    border-color: #25d366;
    color: #4ade80;
}
body.dark .ai-wts-to-option.active .ai-wts-to-type { color: #4ade80; }

/* AI MSG modal (FerModal.vue) property suggestions — on mobile, a compact
   2-per-row grid instead of fixed 175px cards wrapping one per line.
   !important only where Bootstrap's own utility classes on the element
   (d-flex, gap-3) are themselves !important. */
@media (max-width: 767.98px) {
    .ai-props-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
    }
    .ai-props-grid > .ai-msg-card {
        grid-column: 1 / -1;
    }
    .ai-props-grid .ai-prop-card {
        width: auto;
        min-width: 0;
        padding: 4px !important;
    }
    .ai-props-grid .ai-prop-card-img {
        height: 85px;
    }
    .ai-props-grid .ai-prop-card .small {
        font-size: 11px;
    }
    .ai-props-grid .ai-prop-card-handle,
    .ai-props-grid .ai-prop-card-remove {
        font-size: 11px;
    }
}