/* Ad Touch CRM on top of the W3CRM theme.
   Part 1: header/brand tweaks. Part 2: small shims for helper classes the CRM pages were written
   against (Velzon names) so the page markup did not have to change. Part 3: chat + task popups. */

/* ---------- Header / brand ---------- */
.crm-logo-abbr { height: 28px; width: auto; }
.nav-header .crm-brand-title { font-size: 1.15rem; color: #fff; font-weight: 600; letter-spacing: .02em; margin-top: 0; max-width: none; }
.crm-header-title { font-weight: 600; }
.header .crm-header-title { color: #fff; }
.crm-avatar-initial { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.crm-badge-dot { position: absolute; top: 2px; right: 0; font-size: .625rem; line-height: 1; padding: .22rem .38rem; }
.crm-notif-menu { width: 22rem; max-width: 92vw; }
.crm-notif-list { max-height: 22rem; overflow-y: auto; }
.crm-notif-list .notification-item { border: 0; background: transparent; padding: .65rem .75rem; white-space: normal; border-radius: .5rem; }
.crm-notif-list .notification-item.bg-light { background-color: var(--bs-light) !important; }
.crm-nav-badge { margin-left: auto; }
.deznav .metismenu > li > a { display: flex; align-items: center; }
.deznav .metismenu .menu-icon { margin-right: .7rem; }
.deznav .metismenu .menu-icon i { font-size: 1.25rem; line-height: 1; }
[data-sidebar-style=full][data-layout=vertical] .deznav .metismenu > li.mm-active > a i,
.deznav .metismenu > li.mm-active > a i { color: var(--bs-primary); font-weight: 400; }
.deznav .metismenu > li:hover > a i { color: var(--bs-primary); }
.content-body > .container-fluid { padding-top: 1.5rem; }
.card { height: auto; }
/* Cards that sit side by side in a row share one height (a lone card in each column), so their bottoms line up.
   The theme did this for every card; doing it only for lone cards keeps stacked cards in one column from stretching. */
.row > [class*="col"] > .card:only-child { height: calc(100% - 1.563rem); }

/* ---------- Helper-class shims ---------- */
.fs-11 { font-size: .6875rem !important; }
.fs-15 { font-size: .9375rem !important; }
.fs-16 { font-size: 1rem !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.table-crm th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color, #888); white-space: nowrap; }
.table-crm td { vertical-align: middle; }
.table-crm tbody tr:hover { background-color: var(--bs-light); }
.hstack { display: flex; flex-direction: row; align-items: center; align-self: stretch; }
.vstack { display: flex; flex: 1 1 auto; flex-direction: column; align-self: stretch; }

.avatar-xs, .avatar-sm, .avatar-md, .avatar-lg { display: inline-block; flex-shrink: 0; }
.avatar-xs { width: 2rem; height: 2rem; }
.avatar-sm { width: 3rem; height: 3rem; }
.avatar-md { width: 4rem; height: 4rem; }
.avatar-lg { width: 5rem; height: 5rem; }
.avatar-title { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 500; }

.btn-soft-secondary, .btn-soft-primary, .btn-soft-danger, .btn-soft-success, .btn-soft-warning, .btn-soft-info {
  --soft: var(--bs-secondary); color: var(--soft); background-color: color-mix(in srgb, var(--soft) 14%, transparent); border-color: transparent;
}
.btn-soft-primary { --soft: var(--bs-primary); }
.btn-soft-danger { --soft: var(--bs-danger); }
.btn-soft-success { --soft: var(--bs-success); }
.btn-soft-warning { --soft: var(--bs-warning); }
.btn-soft-info { --soft: var(--bs-info); }
.btn-soft-secondary:hover, .btn-soft-primary:hover, .btn-soft-danger:hover, .btn-soft-success:hover, .btn-soft-warning:hover, .btn-soft-info:hover { background-color: var(--soft); color: #fff; }
.btn-ghost-secondary { background: transparent; border-color: transparent; color: var(--bs-secondary); }
.btn-ghost-secondary:hover { background: var(--bs-light); }
.card-animate { transition: transform .2s, box-shadow .2s; }
.card-animate:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.bg-light-subtle { background-color: var(--bs-light) !important; }
.border-dashed { border-style: dashed !important; }
.page-title-box { padding-bottom: 1.25rem; }
.crm-page-head h4 { font-weight: 600; }

.crm-filter-pills .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .8rem; }
.crm-danger-zone { border: 1px solid var(--bs-danger-border-subtle, #f3c6c0); background: var(--bs-danger-bg-subtle, #fdf3f1); border-radius: .5rem; }
.crm-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; }
.crm-role-tile { transition: border-color .15s, box-shadow .15s, transform .15s; }
.crm-role-tile:hover { border-color: var(--bs-primary) !important; box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), .15) !important; transform: translateY(-2px); }
.crm-kanban-card { transition: border-color .15s, box-shadow .15s; }
.crm-kanban-card:hover { border-color: var(--bs-primary) !important; box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .15) !important; }

/* ---------- Auth pages ---------- */
body.crm-auth { min-height: 100vh; background: linear-gradient(135deg, #0b1b2b 0%, var(--bs-primary) 140%); display: flex; flex-direction: column; justify-content: center; }
body.crm-auth .crm-auth-logo { height: 52px; width: auto; }
body.crm-auth .card { height: auto; margin-bottom: 1rem; }

/* ---------- Chat ----------
   The card has a fixed height (viewport minus header/page title); the people list and the message list each scroll on
   their own inside it, so opening a conversation never pushes the list off-screen. On phones only one pane shows at a time. */
.crm-chat { --crm-chat-offset: 11.75rem; height: calc(100vh - var(--crm-chat-offset)); height: calc(100dvh - var(--crm-chat-offset)); min-height: 24rem; overflow: hidden; margin-bottom: 0; }
.crm-chat > .crm-chat-grid { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); height: 100%; min-height: 0; }
.crm-chat-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bs-border-color); }
.crm-chat-people { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: .5rem; }
.crm-chat-section { padding: .6rem 1.1rem .25rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color, #888); font-weight: 600; }
.crm-chat-person { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; cursor: pointer; border-radius: .5rem; margin: .1rem .5rem; position: relative; }
.crm-chat-person:hover, .crm-chat-person:focus-visible, .crm-chat-person.active { background: var(--bs-light); outline: none; }
.crm-chat-person:focus-visible { box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .4); }
.crm-chat-av { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(var(--bs-primary-rgb), .15); color: var(--bs-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.crm-chat-av.group { background: rgba(var(--bs-success-rgb, 40,167,69), .15); color: var(--bs-success); border-radius: .6rem; }
.crm-chat-meta { min-width: 0; flex: 1; }
.crm-chat-last { font-size: .8rem; color: var(--bs-secondary-color, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.crm-chat-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.crm-chat-pane { flex-direction: column; flex: 1 1 auto; min-height: 0; }
.crm-chat-head { flex: 0 0 auto; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; gap: .75rem; }
.crm-chat-back { display: none; }
.crm-chat-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.1rem; background: var(--bs-body-bg); }
.crm-chat-foot { flex: 0 0 auto; padding: .75rem 1rem; border-top: 1px solid var(--bs-border-color); }
.crm-chat-foot textarea { resize: none; max-height: 120px; }
.crm-msg { display: flex; margin-bottom: .6rem; }
.crm-msg.mine { justify-content: flex-end; }
.crm-msg .bubble { max-width: min(75%, 34rem); padding: .55rem .85rem; border-radius: .8rem; background: var(--bs-light); font-size: .875rem; white-space: pre-wrap; word-break: break-word; }
.crm-msg.mine .bubble { background: var(--bs-primary); color: #fff; }
.crm-msg .who { display: block; font-size: .7rem; font-weight: 600; color: var(--bs-primary); margin-bottom: .1rem; }
.crm-msg .when { display: block; font-size: .68rem; opacity: .7; margin-top: .15rem; text-align: right; }
/* Delete a message: a small bin beside your own bubble, shown on hover (always on touch screens). */
.crm-msg { align-items: center; gap: .35rem; }
.crm-msg-del { border: 0; background: transparent; color: var(--bs-secondary-color, #888); opacity: 0; padding: .2rem .3rem; border-radius: .4rem; line-height: 1; transition: opacity .15s; }
.crm-msg:hover .crm-msg-del, .crm-msg-del:focus-visible { opacity: .8; }
.crm-msg-del:hover { opacity: 1; color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
@media (hover: none) { .crm-msg-del { opacity: .55; } }
.crm-msg.deleted .bubble { background: transparent !important; color: var(--bs-secondary-color, #888) !important; border: 1px dashed var(--bs-border-color); }
.crm-msg-deleted { font-style: italic; }
.crm-chat-day { text-align: center; font-size: .72rem; color: var(--bs-secondary-color, #888); margin: .8rem 0; }
.crm-chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bs-secondary-color, #888); }
.min-w-0 { min-width: 0; }
.crm-pick-list { max-height: 14rem; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .25rem; }
.crm-pick { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: .4rem; cursor: pointer; margin: 0; }
.crm-pick:hover { background: var(--bs-light); }

@media (max-width: 991.98px) {
  .crm-chat { --crm-chat-offset: 12rem; }
  .crm-chat > .crm-chat-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-chat-left { border-right: 0; }
  .crm-chat-right { display: none; }
  .crm-chat.crm-chat-open .crm-chat-left { display: none; }
  .crm-chat.crm-chat-open .crm-chat-right { display: flex; }
  .crm-chat-back { display: inline-flex; }
}

/* ---------- Date inputs ----------
   The theme stretches the native calendar indicator over the whole field, so any click or tap that lands on a
   date input (including the tap that closes a <select> list sitting above it) opens the picker. Put the
   indicator back to its normal small icon: the picker opens only from the icon or when the field is used. */
input[type=date]::-webkit-calendar-picker-indicator {
  position: static; inset: auto; width: 1.1em; height: 1.1em; padding: 0; margin-left: .25rem;
  /* The theme's "background: transparent" also wipes Chrome's calendar icon (it IS the background image),
     leaving an invisible target - so the field looked like plain text with no way to pick a date. Draw it. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2Zm3 8H4v8h16v-8Zm-5-6H9v2H7V5H4v4h16V5h-3v2h-2V5Zm-9 8h2v2H6v-2Zm5 0h2v2h-2v-2Zm5 0h2v2h-2v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  color: transparent; opacity: .7; cursor: pointer;
}
input[type=date] { cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Briefly ignore pointer input on sibling date fields right after a select changes (touch click-through). */
.crm-date-guard input[type=date] { pointer-events: none; }

/* ---------- Task reminder popups ---------- */
.crm-task-popups { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; width: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .6rem; max-height: calc(100vh - 2rem); overflow-y: auto; pointer-events: none; }
.crm-task-card { pointer-events: auto; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-warning); border-radius: .6rem; padding: .85rem 1rem; box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.18); animation: crm-task-in .25s ease-out; }
.crm-task-card.overdue { border-left-color: var(--bs-danger); }
.crm-task-icon { color: var(--bs-warning); }
.crm-task-card.overdue .crm-task-icon { color: var(--bs-danger); }
.crm-task-title { word-break: break-word; }
.crm-task-notes { white-space: pre-wrap; word-break: break-word; max-height: 6rem; overflow-y: auto; }
@keyframes crm-task-in { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .crm-task-card { animation: none; } }
@media (max-width: 575.98px) { .crm-task-popups { right: .5rem; left: .5rem; bottom: .5rem; width: auto; } }
.crm-task-tools { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem .65rem; box-shadow: 0 .4rem 1rem rgba(0,0,0,.12); }
/* When the reminders are moved into the always-on-top window they fill it. */
.crm-task-popups.in-pip { position: static; width: auto; max-height: none; overflow: visible; padding: .6rem; pointer-events: auto; background: var(--bs-light, #f5f5f5); min-height: 100vh; }
.crm-task-popups.in-pip .crm-task-card { box-shadow: none; }
/* "Turn on pop-ups" prompt */
.crm-nudge { position: fixed; top: 4.25rem; right: 1rem; z-index: 1085; width: min(22rem, calc(100vw - 2rem)); background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-primary); border-radius: .6rem; padding: .85rem 1rem; box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.18); }


/* ---------- Attachments (task / creative images and videos) ---------- */
.crm-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .65rem; }
.crm-att-grid.crm-att-sm { grid-template-columns: repeat(auto-fill, 4.25rem); gap: .4rem; }
.crm-att { position: relative; min-width: 0; }
.crm-att-tile { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; background: #111827; border: 1px solid var(--bs-border-color); cursor: pointer; text-decoration: none; }
.crm-att-sm .crm-att-tile { aspect-ratio: 1; }
.crm-att-tile:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.crm-att-tile img, .crm-att-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.crm-att-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.9rem; background: rgba(0, 0, 0, .25); pointer-events: none; }
.crm-att-sm .crm-att-play { font-size: 1.3rem; }
.crm-att-name { font-size: .72rem; color: var(--bs-secondary-color, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .2rem; }
.crm-att-sm .crm-att-name { display: none; }
.crm-att-del { position: absolute; top: .25rem; right: .25rem; z-index: 2; margin: 0; }
.crm-att-del button { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 0; background: rgba(17, 24, 39, .78); color: #fff; line-height: 1; padding: 0; font-size: 1rem; display: flex; align-items: center; justify-content: center; }
.crm-att-del button:hover { background: var(--bs-danger); }
.crm-att-stage { min-height: 50vh; background: #000; display: flex; align-items: center; justify-content: center; }
.crm-att-full { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto; background: #000; }
.crm-att-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .2); color: #fff; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; }
.crm-att-nav:hover { background: rgba(255, 255, 255, .35); }
.crm-att-nav.prev { left: .75rem; } .crm-att-nav.next { right: .75rem; }
/* The viewer and dialogs must sit above the reminder popups (z-index 1090). */
#att-modal, #att-upload-modal, #task-done-modal { z-index: 1100; }
.crm-task-files:empty { display: none; }
.crm-task-comment textarea { resize: vertical; }
.crm-quote { border-left: 3px solid var(--bs-success); padding: .15rem .6rem; margin-top: .35rem; background: var(--bs-light); border-radius: 0 .35rem .35rem 0; font-size: .8rem; white-space: pre-wrap; word-break: break-word; }

/* ---------- Avatars: letters centred, photos, profile page, crop dialog ---------- */
/* The theme's header avatar slot is a 30px clipped circle; the letter circle used to be 36px inside it, so it was cut off
   and the letter sat off-centre. Make the slot a little bigger and let the letter / photo fill it exactly. */
.header-profile-dropdown .profile-head .profile-media { width: 38px; min-width: 38px; height: 38px; }
.crm-avatar-initial { width: 100%; height: 100%; padding: 0; font-size: .95rem; line-height: 1; font-weight: 600; text-align: center; }
.crm-avatar-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Never squash an avatar into an oval when the row gets crowded; centre the letter in the circle. */
.crm-avatar, .crm-avatar-initial { flex: 0 0 auto; line-height: 1; padding: 0; text-align: center; }
.crm-avatar { aspect-ratio: 1; }
img.crm-avatar-img { object-fit: cover; display: inline-block; border-radius: 50%; }
.crm-chat-av { overflow: hidden; padding: 0; line-height: 1; }
.crm-chat-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crm-profile-photo { position: relative; width: 128px; height: 128px; border-radius: 50%; border: 0; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(var(--bs-primary-rgb), .14); cursor: pointer; }
.crm-profile-photo:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 3px; }
.crm-profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-profile-initial { font-size: 3rem; font-weight: 600; line-height: 1; color: var(--bs-primary); }
.crm-profile-cam { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); opacity: .95; }

.crm-crop { position: relative; width: min(280px, 100%); aspect-ratio: 1; margin: 0 auto; overflow: hidden; background: #111827; border-radius: .5rem; touch-action: none; cursor: grab; user-select: none; outline: none; }
.crm-crop:active { cursor: grabbing; }
.crm-crop:focus-visible { box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .5); }
.crm-crop img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none; }
.crm-crop-mask { position: absolute; inset: 0; pointer-events: none; }
.crm-crop-mask::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 400px rgba(0, 0, 0, .55); }
#avatar-modal { z-index: 1100; }
.crm-att-novid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); font-size: 2rem; background: linear-gradient(135deg, #1f2937, #111827); }
.crm-att-sm .crm-att-novid { font-size: 1.4rem; }

/* ---------- Layout hardening (labels never squeeze, nothing pushes the page sideways) ---------- */
.btn, .badge { white-space: nowrap; }                    /* a button label stays on one line; its row wraps instead */
.content-body .card-body, .content-body .card-header, .content-body .list-group-item { min-width: 0; }
.content-body .d-flex > .flex-grow-1, .content-body .d-flex > .min-w-0 { min-width: 0; }
.content-body p, .content-body h4, .content-body h5, .content-body h6, .content-body .fw-medium, .content-body .list-group-item { overflow-wrap: break-word; }
.content-body .table-responsive { max-width: 100%; }
.nav-tabs-custom, .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
.crm-page-head > .d-flex { flex-wrap: wrap; }

@media (max-width: 575.98px) {
  .content-body > .container-fluid { padding-left: .85rem; padding-right: .85rem; }
  .content-body { overflow-x: clip; }                    /* safety net; the causes are fixed below */
  .search-box, form.search-box { min-width: 0 !important; width: 100%; flex: 1 1 100%; }
  .search-box .form-control { min-width: 0; width: 100%; }
  .crm-page-head { align-items: stretch !important; }
  .crm-page-head > .d-flex { width: 100%; }
  .crm-page-head > .d-flex .btn { flex: 1 1 auto; }
  .card-header.d-flex, .card-body > .d-flex { flex-wrap: wrap; }
  .card-header .btn, .card-body .btn { max-width: 100%; }
  .text-end.flex-shrink-0 { flex-shrink: 1 !important; min-width: 0; }
  td .btn, th .btn { white-space: nowrap; }
}

/* ---------- Search boxes: magnifier inside the field, vertically centred ---------- */
.search-box { position: relative; }
.search-box .search-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); line-height: 1; font-size: 1.05rem; color: var(--bs-secondary-color, #888); pointer-events: none; }
.search-box .form-control { padding-left: 2.6rem; }
.nav-header .crm-brand-title { white-space: nowrap; }