/* My Travel Way dashboard presentation layer. Functional Bootstrap routes remain unchanged. */
:root {
  --mtw-navy: #0d162b;
  --mtw-green: #10bf8a;
  --mtw-border: #dfe7f1;
  --mtw-muted: #58708f;
}

body.app-body { background: #f8fafc; color: #0b1220; }
.login-bg .login-brand,
.login-bg .login-brand strong { color: #0d162b !important; }
.login-bg .login-brand small { color: #58708f !important; }
.app-sidebar {
  width: 348px; background: var(--mtw-navy); border-right: 0; padding: 18px 14px;
}
.app-main { margin-left: 348px; }
.sidebar-header { padding: 18px 16px 34px; }
.brand-mark { gap: 14px; }
.brand-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--mtw-green); }
.brand-mark strong { font-size: 1.75rem; letter-spacing: -0.04em; }
.brand-mark small { color: #aebbd0; margin-top: 3px; }
.sidebar-nav { padding: 0; }
.sidebar-link { border-radius: 16px; color: #b7c4d9; font-size: 1.08rem; padding: 15px 18px; margin: 4px 0; }
.sidebar-link i { width: 24px; text-align: center; font-size: 1.15rem; }
.sidebar-link:hover, .sidebar-link.active { color: #fff; background: var(--mtw-green); box-shadow: 0 10px 22px rgba(16,191,138,.22); }
.sidebar-footer { padding: 22px 0 6px; }
.admin-chip { border-color: rgba(255,255,255,.14); border-radius: 14px; }
.topbar { min-height: 100px; padding: 18px 26px; background: #fff; }
.eyebrow { color: var(--mtw-muted); }
.page-title { font-size: 1.8rem; letter-spacing: -.03em; }
.topbar-actions .btn { border-radius: 14px; padding: 11px 18px; }
.app-content { padding: 48px 26px; }
.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.metric-card { min-height: 160px; border-radius: 22px; padding: 32px; box-shadow: 0 12px 30px rgba(13,22,43,.06); }
.metric-card strong { font-size: 2.15rem; }
.content-card { border-radius: 20px; box-shadow: 0 12px 30px rgba(13,22,43,.05); padding: 28px; }
.section-heading h2 { font-size: 1.35rem; }
.data-table { min-width: 760px; }
.progress { border-radius: 99px; }
.inbox-shell { grid-template-columns: 438px minmax(0, 1fr); gap: 0; height: calc(100vh - 150px); min-height: 650px; background: #eef1f5; }
.inbox-list-panel { background: #fff; border-radius: 0; border-right: 1px solid #dfe5ed; padding: 0; }
.inbox-title-row { display: flex; align-items: center; justify-content: space-between; padding: 24px 20px 18px; background: #f1f3f6; }
.inbox-title-row h2 { margin: 0; font-size: 1.35rem; }
.inbox-title-row span { display: flex; gap: 18px; font-size: 1.2rem; }
.inbox-filters { padding: 10px 20px; margin: 0; border-bottom: 1px solid #dfe5ed; }
.inbox-filters .form-control, .inbox-filters .input-group-text { background: #eef1f5; border: 0; }
.inbox-filters select, .inbox-filters button { font-size: .8rem; }
.conversation-list { height: calc(100% - 190px); gap: 0; }
.conversation-card { position: relative; min-height: 86px; border: 0; border-bottom: 1px solid #e2e7ee; border-radius: 0; padding: 16px 20px 12px 84px; }
.conversation-card:hover, .conversation-card.active { background: #edf3f9; border-color: #e2e7ee; }
.conversation-card-link { display:block; height:100%; color:inherit; text-decoration:none; }
.conversation-delete-form { position:absolute; top:8px; right:7px; z-index:2; }
.conversation-delete-button { display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:6px; background:#fff0f1; color:#f04444; cursor:pointer; font-size:.78rem; }
.conversation-delete-button:hover { background:#f04444; color:#fff; }
.conversation-avatar { position: absolute; left: 20px; top: 17px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--mtw-green); color: white; font-weight: 700; font-size: 1.25rem; }
.conversation-card .conversation-top strong { font-size: 1rem; color: #111827; }
.conversation-card .conversation-top time { color: #58708f; font-size: .72rem; }
.conversation-card p { margin: 6px 0 0; color: #58708f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-card .badge-row, .conversation-card .conversation-meta { display: none; }
.thread-panel { border-radius: 0; background: #eef1f5; }
.thread-panel:has(.empty-state) { display: grid; place-items: center; }
.thread-panel .empty-state { color: #58708f; }
.thread-panel .empty-state i { color: #cbd2dc; font-size: 5rem; }
.thread-panel .empty-state strong { color: #58708f; font-size: 1.8rem; font-weight: 500; }
.inbox-shell:not(:has(.thread-header)) .customer-panel { display: none; }
.inbox-shell:has(.thread-header) { grid-template-columns: 360px minmax(420px, 1fr) 320px; }
@media (max-width: 1199.98px) {
  .app-sidebar { width: 280px; }
  .app-main { margin-left: 280px; }
}
@media (max-width: 991.98px) {
  .app-main { margin-left: 0; }
  .inbox-shell, .inbox-shell:has(.thread-header) { grid-template-columns: 1fr; height: auto; }
  .thread-panel { min-height: 620px; }
}

/* MTW dark sidebar theme */
.app-sidebar{background:#0d162b !important;color:#e9f1ee !important}
.sidebar-link{color:#b7c4d9 !important}
.sidebar-link:hover,.sidebar-link.active{background:#10bf8a !important;color:#fff !important}
.brand-mark,.brand-mark strong{color:#fff !important}
.brand-mark small{color:#aebbd0 !important}

/* Inbox action controls: compact, clean icon buttons matching the reference UI. */
.inbox-actions { display: inline-flex; align-items: center; gap: 14px !important; }
.inbox-actions .icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #52657d;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.inbox-actions .icon-btn:hover,
.inbox-actions .icon-btn:focus-visible {
  background: #e3eaf2;
  color: #0e9f75;
  outline: 0;
}
.inbox-actions .icon-btn:active { transform: scale(.94); }


.lead-segment-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 10px; background: #f1f3f6; }
.segment-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 11px; border: 1px solid #52657d; border-radius: 999px; background: #fff; color: #243b5a; font-size: .75rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.segment-chip:hover, .segment-chip.active { color: #111827; background: #eef3f8; }
.segment-chip.all.active { background: #111827; color: #fff; border-color: #111827; }
.segment-chip.hot { color: #b42318; border-color: #ef9a8f; }
.segment-chip.warm { color: #9a5b00; border-color: #e7b45c; }
.segment-chip.positive { color: #087f5b; border-color: #20b486; }
.segment-chip.negative { color: #3949ab; border-color: #6272e8; }
.segment-chip.cold { color: #52657d; border-color: #9aa9bc; }


.chat-media-image { display: block; max-width: min(100%, 320px); max-height: 360px; object-fit: cover; border-radius: 12px; margin: 8px 0; }
.chat-media-document { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #eef3f8; color: #0e7c5a; font-weight: 600; text-decoration: none; margin: 8px 0; }
.chat-media-document:hover { background: #dcebe5; color: #075b43; }

/* Inbox reference layout: WhatsApp-style three-pane conversation view */
.inbox-shell:has(.thread-header) {
  grid-template-columns: 392px minmax(500px, 1fr) 300px;
  height: calc(100vh - 120px);
  min-height: 650px;
  background: #efeae2;
  border: 1px solid #dce3eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.inbox-list-panel { background: #fff; border-right: 1px solid #d9e0e7; }
.inbox-title-row { background: #f1f3f6; padding: 16px 16px 12px; }
.inbox-title-row h2 { font-size: 1.05rem; }
.inbox-filters { padding: 10px 12px 8px; background: #fff; border-bottom: 0; }
.inbox-filters .input-group { height: 32px; }
.inbox-filters .input-group-text,
.inbox-filters .form-control { height: 32px; background:#f0f2f5; border:0; }
.inbox-filters .input-group-text { border-radius:8px 0 0 8px; color:#52657d; padding-left:10px; }
.inbox-filters .inbox-search-submit { cursor: pointer; }
.inbox-filters .form-control { border-radius:0 8px 8px 0; font-size:.82rem; min-width:0; }
.date-filter-chips { display:flex; align-items:center; gap:4px; overflow-x:auto; padding:8px 12px 4px; background:#fff; scrollbar-width:none; }
.date-filter-chips::-webkit-scrollbar { display:none; }
.date-chip { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:22px; padding:2px 8px; border:1px solid #b9c7d6; border-radius:999px; color:#243b5a; background:#fff; text-decoration:none; font-size:.68rem; font-weight:600; line-height:1.1; white-space:nowrap; }
.date-chip.active { background:#111827; color:#fff; border-color:#111827; }
.date-chip.pending { color:#ff6b00; border-color:#ffc08a; }
.date-picker-row { display:flex; align-items:center; gap:6px; margin:0; padding:4px 12px 8px; background:#fff; border-bottom:1px solid #dfe5ed; min-width:0; }
.date-picker-row label { display:inline-flex; align-items:center; gap:4px; margin:0; font-size:.68rem; font-weight:700; color:#243b5a; white-space:nowrap; }
.date-picker-input { flex:1 1 auto; min-width:0; height:24px; border:1px solid #cdd8e4; border-radius:5px; padding:0 6px; color:#111827; font-size:.68rem; background:#fff; }
.lead-segment-chips { padding: 8px 12px; background:#fff; border-bottom:1px solid #dfe5ed; gap:5px; }
.segment-chip { font-size:.72rem; padding:3px 9px; }
.conversation-list { height: calc(100% - 176px); overflow-y:auto; gap:0; }
.conversation-card { display:block; height:72px; min-height:72px; max-height:72px; padding: 10px 56px 8px 72px; border-bottom:1px solid #e1e6ed; overflow:hidden; }
.conversation-card:hover,.conversation-card.active { background:#e6f3fb; }
.conversation-avatar { width:44px; height:44px; left:14px; top:14px; }
.conversation-card .conversation-top { display:flex; align-items:center; min-width:0; gap:8px; }
.conversation-card .conversation-top strong { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; line-height:1.2; }
.conversation-card .conversation-top time { position:absolute; top:11px; right:12px; max-width:42px; text-align:right; font-size:.68rem; color:#58708f; }
.conversation-card .conversation-meta { display:block; min-width:0; font-size:.68rem; color:#58708f; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-card .conversation-phone { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-card .unread-count { position:absolute; right:12px; bottom:9px; }
.conversation-card .badge-row { display:none; }
.lead-badge { display:inline-flex; align-items:center; border:1px solid; border-radius:999px; padding:1px 6px; font-size:.64rem; line-height:1.3; background:#fff; }
.lead-badge.hot { color:#e55353; border-color:#ff7777; }
.lead-badge.warm { color:#d88a00; border-color:#f2b33d; }
.lead-badge.cold { color:#4d67d8; border-color:#8a9bff; }
.conversation-card p { margin:2px 0 0; color:#667781; font-size:.76rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.thread-panel { background:#efeae2; border-radius:0; }
.thread-header { background:#f1f3f6; border-bottom:1px solid #d9e0e7; padding:12px 16px; }
.thread-header-tools { display:flex; align-items:center; gap:10px; margin-left:auto; }
.thread-label-chip { border:1px solid #6677ff; color:#4b5eff; border-radius:6px; padding:4px 9px; font-size:.75rem; background:#fff; }
.manual-chat-toggle { font-size:.78rem; color:#111827; white-space:nowrap; }
.thread-body { padding:20px 34px; background:#efeae2; }
.message-row { display:flex; margin:7px 0; }
.message-row.incoming { justify-content:flex-start; }
.message-row.outgoing { justify-content:flex-end; }
.message-bubble { max-width:74%; padding:9px 12px; border-radius:12px; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.12); }
.message-row.outgoing .message-bubble { background:#d9fdd3; }
.message-type { font-size:.72rem; color:#667781; margin-bottom:4px; }
.message-bubble p { margin:0; white-space:pre-wrap; line-height:1.4; }
.message-bubble small { display:block; text-align:right; color:#6b7280; font-size:.65rem; margin-top:5px; }
.message-ticks { display:inline-block; margin-left:4px; font-size:.8rem; font-weight:800; letter-spacing:-.16em; }
.message-ticks.sent { color:#667781; }.message-ticks.delivered { color:#667781; }.message-ticks.read { color:#1686d9; }
.message-delete-form { display:flex; justify-content:flex-end; margin-top:6px; }
.message-delete-button { border:0; background:transparent; color:#dc3545; padding:2px 4px; line-height:1; cursor:pointer; }
.message-delete-button:hover { color:#a71d2a; }
.chat-media-image { display:block; max-width:280px; max-height:340px; object-fit:cover; border-radius:9px; }
.chat-media-document { display:inline-flex; align-items:center; gap:7px; padding:9px 10px; border-radius:8px; background:#f7fafc; color:#075e54; }
.reply-box { background:#f0f2f5; border-top:1px solid #d7dde4; padding:9px 16px; }
@media (max-width: 1200px) { .inbox-shell:has(.thread-header) { grid-template-columns:340px minmax(420px,1fr); } .customer-panel { display:none; } }

/* Responsive dashboard overrides */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
.app-main { min-width: 0; width: 100%; }
.app-content { min-width: 0; overflow-x: hidden; }
.inbox-shell { width: 100%; max-width: 100%; }

@media (max-width: 1199.98px) {
  .inbox-shell:has(.thread-header) {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }
  .thread-body { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 991.98px) {
  .app-content { padding: 24px 16px; }
  .topbar { padding: 14px 16px; }
  .topbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .inbox-shell,
  .inbox-shell:has(.thread-header) {
    display: block;
    height: auto;
    min-height: 0;
  }
  .inbox-list-panel { width: 100%; border-right: 0; }
  .conversation-list { height: auto; max-height: 46vh; overflow-y: auto; }
  .thread-panel { width: 100%; min-height: 0; }
  .customer-panel { width: 100%; }
  .thread-header { display: flex; flex-wrap: wrap; gap: 8px; }
  .thread-header-tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .thread-body { min-height: 48vh; padding: 16px 14px; }
  .message-bubble { max-width: min(88%, 520px); }
  .reply-box { padding: 10px 12px; }
}

@media (max-width: 575.98px) {
  .app-content { padding: 14px 8px; }
  .topbar { min-height: 72px; padding: 10px 12px; }
  .page-title { font-size: 1.2rem; }
  .eyebrow { font-size: .68rem; }
  .topbar-actions .btn { padding: 8px 10px; font-size: .8rem; }
  .inbox-title-row { padding: 12px; }
  .inbox-filters { padding: 8px; }
  .lead-segment-chips { padding: 8px; }
  .segment-chip { font-size: .68rem; padding: 3px 7px; }
  .conversation-card { padding-left: 64px; padding-right: 10px; }
  .conversation-avatar { left: 10px; }
  .thread-header { padding: 10px 12px; }
  .manual-chat-toggle { white-space: normal; }
  .thread-body { padding: 12px 8px; }
  .message-bubble { max-width: 94%; padding: 8px 10px; }
  .message-bubble p { font-size: .9rem; overflow-wrap: anywhere; }
  .chat-media-image { max-width: 100%; height: auto; }
  .customer-panel { padding: 14px 12px; }
  .data-table { min-width: 620px; }
}

/* Desktop viewport fit: keep page grids inside the available content width. */
@media (min-width: 992px) {
  .app-sidebar { width: 260px; }
  .app-main { margin-left: 260px; min-width: 0; }
  .app-content { min-width: 0; max-width: 100%; }
  .metric-grid,
  .content-grid,
  .status-pill-grid { width: 100%; min-width: 0; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card,
  .content-card,
  .inbox-shell,
  .customer-panel,
  .thread-panel,
  .inbox-list-panel { min-width: 0; max-width: 100%; }
  .metric-card { overflow: hidden; }
  .content-card { overflow: hidden; }
  .inbox-shell:has(.thread-header) {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }
  .inbox-shell:has(.thread-header) .customer-panel { display: none; }
  .content-card .table-responsive,
  .content-card .table-wrap,
  .content-card table { max-width: 100%; }
  .content-card .table-responsive,
  .content-card .table-wrap { overflow-x: auto; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .app-sidebar { width: 240px; }
  .app-main { margin-left: 240px; }
  .app-content { padding: 22px 16px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .content-card { max-width: 100%; overflow-x: auto; }
}

/* The sidebar margin is already accounted for by the main layout; do not add
   another full viewport width on top of it. */

/* Clean compact inbox list matching the WhatsApp-style reference. */
.inbox-list-panel .inbox-filters {
  padding: 10px 12px 6px !important;
  border-bottom: 0 !important;
  background: #fff !important;
}
.inbox-list-panel .inbox-filters .input-group {
  height: 38px;
}
.inbox-list-panel .inbox-filters .input-group-text,
.inbox-list-panel .inbox-filters .form-control {
  height: 38px;
  border: 0 !important;
  background: #f0f2f5 !important;
  box-shadow: none !important;
}
.inbox-list-panel .inbox-filters .input-group-text {
  border-radius: 8px 0 0 8px !important;
  color: #52657d;
}
.inbox-list-panel .inbox-filters .form-control {
  border-radius: 0 8px 8px 0 !important;
  font-size: .86rem;
}
.date-filter-chips,
.lead-segment-chips {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px !important;
  padding: 6px 12px !important;
  background: #fff !important;
}
.date-filter-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 0 !important;
  scrollbar-width: none;
}
.date-filter-chips::-webkit-scrollbar {
  display: none;
}
.date-filter-chips .segment-chip,
.lead-segment-chips .segment-chip {
  min-height: 24px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: .7rem !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.date-filter-chips .segment-chip.pending {
  color: #ff6b00;
  border-color: #ffc08a;
}
.date-picker-row {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 2px 12px 8px !important;
  margin: 0 !important;
  border-bottom: 1px solid #dfe5ed !important;
  background: #fff !important;
}
.date-picker-row label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  color: #243b5a;
  white-space: nowrap;
}
.date-picker-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 25px;
  border: 1px solid #cdd8e4;
  border-radius: 5px;
  padding: 0 6px;
  font-size: .7rem;
}
.conversation-list {
  height: calc(100% - 176px) !important;
  overflow-y: auto !important;
  gap: 0 !important;
}
.conversation-card {
  display: block !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 10px 54px 8px 72px !important;
  overflow: hidden !important;
}
.conversation-card .conversation-top {
  display: flex !important;
  align-items: center;
  min-width: 0;
}
.conversation-card .conversation-top strong {
  display: block !important;
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .9rem !important;
  line-height: 1.2 !important;
}
.conversation-card .conversation-top time {
  position: absolute !important;
  top: 11px !important;
  right: 12px !important;
  font-size: .68rem !important;
}
.conversation-card .conversation-meta {
  display: block !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.conversation-card p {
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.conversation-card .badge-row {
  display: none !important;
}
.conversation-card .conversation-top time { right:40px !important; }
.conversation-delete-form { position:absolute !important; top:8px !important; right:7px !important; z-index:3; }

/* Date picker row as one compact calendar control. */
.inbox-list-panel .date-picker-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 26px !important;
  margin: 0 12px 8px !important;
  padding: 0 34px 0 10px !important;
  border: 1px solid #cdd8e4 !important;
  border-radius: 6px !important;
  background: #f8fbff !important;
  overflow: hidden !important;
}
.inbox-list-panel .date-picker-row label {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  color: #243b5a !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.inbox-list-panel .date-picker-row label strong {
  color: #111827 !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
}
.inbox-list-panel .date-picker-input {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
}
.inbox-list-panel .date-picker-input::-webkit-datetime-edit,
.inbox-list-panel .date-picker-input::-webkit-datetime-edit-fields-wrapper,
.inbox-list-panel .date-picker-input::-webkit-datetime-edit-text,
.inbox-list-panel .date-picker-input::-webkit-datetime-edit-month-field,
.inbox-list-panel .date-picker-input::-webkit-datetime-edit-day-field,
.inbox-list-panel .date-picker-input::-webkit-datetime-edit-year-field {
  color: transparent !important;
}
.inbox-list-panel .date-picker-input::-webkit-calendar-picker-indicator {
  position: absolute !important;
  right: 7px !important;
  top: 4px !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
@media (min-width: 1200px) {
  .app-main { width: auto; max-width: calc(100vw - 260px); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .app-main { width: auto; max-width: calc(100vw - 240px); }
}
@media (max-width: 991.98px) {
  .app-main { width: 100%; max-width: 100%; }
}

/* Visual polish for dashboard cards and responsive navigation. */
@media (min-width: 1200px) {
  .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

.metric-card {
  min-height: 132px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.metric-card span,
.metric-card small { min-width: 0; overflow-wrap: anywhere; }
.metric-card strong { line-height: 1; white-space: nowrap; }
.metric-card small { text-align: left; }

.section-heading { min-width: 0; flex-wrap: wrap; }
.section-heading > * { min-width: 0; }
.content-card .table-responsive { -webkit-overflow-scrolling: touch; }
.content-card .section-heading { position:relative; }
.card-collapse-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  margin-left:auto;
  padding:0;
  border:1px solid #d7e0e8;
  border-radius:50%;
  background:#f7fafc;
  color:#58708f;
  cursor:pointer;
}
.card-collapse-button:hover { border-color:#128c7e; color:#075e54; background:#eefaf6; }
.content-card.is-collapsed > :not(.section-heading) { display:none; }
.content-card .conversation {
  max-height:340px;
  overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:#9aa8b6 #eef2f5;
}
.content-card .conversation::-webkit-scrollbar { width:8px; }
.content-card .conversation::-webkit-scrollbar-track { background:#eef2f5; border-radius:8px; }
.content-card .conversation::-webkit-scrollbar-thumb { background:#9aa8b6; border-radius:8px; }
.content-card .audit-list {
  max-height:340px;
  overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:#9aa8b6 #eef2f5;
}
.content-card .audit-list::-webkit-scrollbar { width:8px; }
.content-card .audit-list::-webkit-scrollbar-track { background:#eef2f5; border-radius:8px; }
.content-card .audit-list::-webkit-scrollbar-thumb { background:#9aa8b6; border-radius:8px; }

@media (max-width: 1199.98px) and (min-width: 992px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 575.98px) {
  .metric-card {
    min-height: 104px;
    padding: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .metric-card small { grid-column: 1 / -1; margin-top: -8px; }
  .sidebar-header { padding: 16px 14px 24px; }
  .brand-mark strong { font-size: 1.45rem; }
  .sidebar-link { padding: 12px 14px; }
}

/* Keep navigation usable on short screens without moving the main content. */
.app-sidebar {
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.app-sidebar::-webkit-scrollbar { width: 7px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
  border-radius: 999px;
}
.sidebar-nav { min-height: 0; }
.sidebar-footer { flex-shrink: 0; }

@media (max-width: 991.98px) {
  .app-sidebar { height: 100%; max-height: 100%; }
}

/* Scroll only the navigation; keep the account/logout footer out of its way. */
.app-sidebar {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 7px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }
.sidebar-footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: var(--mtw-navy);
}

.dashboard-activity-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 12px 16px;
  border: 1px solid #dce5ed;
  border-radius: 8px;
  background: #fff;
}
.dashboard-activity-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  margin-right: auto;
}
.dashboard-activity-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #128c52;
  background: #e9faf1;
}
.dashboard-activity-title strong,
.dashboard-activity-title small { display: block; }
.dashboard-activity-title strong { color: #111827; font-size: .9rem; }
.dashboard-activity-title small { margin-top: 3px; color: #128c52; font-size: .72rem; font-weight: 600; }
.dashboard-date-chips { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.dashboard-date-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 10px;
  border: 1px solid #d0dbe5;
  border-radius: 7px;
  color: #38516c;
  background: #fff;
  text-decoration: none;
  font-size: .68rem;
  font-weight: 600;
}
.dashboard-date-chip:hover,
.dashboard-date-chip.active { color: #128c52; border-color: #cfeee0; background: #effaf4; }
.dashboard-date-picker { display: flex; align-items: center; gap: 6px; margin: 0; }
.dashboard-date-picker label { display: inline-flex; align-items: center; gap: 5px; color: #38516c; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.dashboard-date-picker input { height: 30px; width: 150px; padding: 3px 7px; border: 1px solid #cdd8e4; border-radius: 7px; color: #243b5a; background: #fff; font-size: .72rem; }
.dashboard-date-reset { width: 34px; height: 30px; display: grid; place-items: center; border: 1px solid #d0dbe5; border-radius: 7px; color: #38516c; text-decoration: none; }
.dashboard-date-reset:hover { color: #128c52; border-color: #128c52; }

.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.payment-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.payment-summary-card { min-height: 112px; padding: 20px; border: 1px solid #dce5ed; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(13,22,43,.04); }
.payment-summary-card span { display: block; color: #58708f; font-size: .76rem; font-weight: 700; }
.payment-summary-card strong { display: block; margin-top: 10px; color: #0d162b; font-size: 1.35rem; }
.payment-summary-card.overdue { border-top: 3px solid #f97316; }
.payment-summary-card.overdue strong { color: #ea580c; }
.payment-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.payment-search { max-width: 360px; }
.payment-filters select { max-width: 300px; }
.payment-status-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.payment-status-filters .segment-chip { text-decoration: none; }
.campaign-layout { display:grid; grid-template-columns:minmax(300px, .78fr) minmax(0, 1.6fr); gap:28px; align-items:start; }
.campaign-launch-card, .campaign-history-card { min-width:0; }
.campaign-source-tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.campaign-source-tab { border:1px solid #d6e0eb; border-radius:7px; background:#fff; color:#38516c; padding:7px 10px; font-size:.78rem; cursor:pointer; }
.campaign-source-tab.active { background:#0e9f6e; border-color:#0e9f6e; color:#fff; }
.campaign-audience-note { display:flex; gap:8px; margin-top:16px; padding:10px 12px; border:1px solid #dce7ef; border-radius:8px; background:#f7fbfd; color:#52657d; font-size:.78rem; }
.campaign-filters { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.campaign-date-form { display:flex; align-items:center; gap:7px; margin-left:auto; border:1px solid #cdd8e4; border-radius:7px; padding:4px 8px; color:#38516c; font-size:.75rem; }
.campaign-date-form input { border:0; color:#243b5a; font-size:.75rem; }
.campaign-table td small, .campaign-detail-table td small { display:block; color:#71839a; font-size:.72rem; margin-top:3px; }
.campaign-table td:first-child a { color:#111827; text-decoration:none; }
.campaign-status { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:.7rem; font-weight:700; white-space:nowrap; background:#eef2f6; color:#52657d; }
.campaign-status.status-completed, .campaign-status.status-sent, .campaign-status.status-delivered, .campaign-status.status-read { background:#e7f8ef; color:#087443; }
.campaign-status.status-sending, .campaign-status.status-queued { background:#e7f0ff; color:#1d5ed8; }
.campaign-status.status-failed, .campaign-status.status-completed_with_errors { background:#fff0f0; color:#c92a2a; }
.campaign-status.status-paused { background:#fff7df; color:#9b6700; }
.campaign-progress { width:110px; height:6px; margin-bottom:4px; border-radius:99px; background:#e5edf2; overflow:hidden; }
.campaign-progress span { display:block; height:100%; border-radius:inherit; background:#0e9f6e; }
.campaign-summary-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.campaign-summary-grid > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border:1px solid #dce5ee; border-radius:12px; background:#fff; }
.campaign-summary-grid span { color:#647890; font-size:.78rem; }
.campaign-summary-grid strong { font-size:1.4rem; color:#111827; }
@media (max-width: 900px) { .campaign-layout { grid-template-columns:1fr; } .campaign-summary-grid { grid-template-columns:repeat(2, 1fr); } .campaign-date-form { margin-left:0; } }

/* Campaign page reference layout overrides. */
.campaign-layout { display:grid !important; grid-template-columns:minmax(340px, .72fr) minmax(0, 1.55fr) !important; gap:28px !important; align-items:start !important; }
.campaign-layout .content-card { margin:0 !important; min-width:0 !important; }
.campaign-source-tabs { display:flex !important; gap:6px !important; margin-bottom:12px !important; }
.campaign-source-tab { display:inline-flex !important; align-items:center !important; border:1px solid #d6e0eb !important; border-radius:7px !important; background:#fff !important; color:#38516c !important; padding:7px 10px !important; font-size:.78rem !important; line-height:1.2 !important; cursor:pointer !important; }
.campaign-source-tab.active { background:#0e9f6e !important; border-color:#0e9f6e !important; color:#fff !important; }
.campaign-blast-button { min-height:42px !important; border-radius:8px !important; font-weight:700 !important; }
.campaign-filters { display:flex !important; align-items:center !important; gap:6px !important; flex-wrap:wrap !important; }
.campaign-filters .date-chip { display:inline-flex !important; align-items:center !important; min-height:25px !important; padding:3px 10px !important; border:1px solid #b9c7d6 !important; border-radius:999px !important; background:#fff !important; color:#38516c !important; text-decoration:none !important; font-size:.7rem !important; }
.campaign-filters .date-chip.active { background:#0e172a !important; border-color:#0e172a !important; color:#fff !important; }
.campaign-date-form { margin-left:auto !important; display:flex !important; align-items:center !important; gap:6px !important; height:30px !important; padding:2px 8px !important; border:1px solid #cdd8e4 !important; border-radius:7px !important; background:#fff !important; }
.campaign-date-form input { width:112px !important; border:0 !important; outline:0 !important; color:#243b5a !important; font-size:.72rem !important; }
@media (max-width: 1000px) { .campaign-layout { grid-template-columns:1fr !important; } .campaign-date-form { margin-left:0 !important; } }
.payment-status-filters .segment-chip.active { color: #fff; background: #0d162b; border-color: #0d162b; }
.payment-status { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid #cbd5e1; border-radius: 999px; color: #475569; background: #fff; font-size: .67rem; font-weight: 700; white-space: nowrap; }
.payment-status.partially_paid { color: #b45309; border-color: #fbbf24; background: #fffbeb; }
.payment-status.overdue { color: #c2410c; border-color: #fb923c; background: #fff7ed; }
.payment-status.completed { color: #047857; border-color: #6ee7b7; background: #ecfdf5; }
.payment-status.pending { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }
.payment-progress { width: 72px; height: 6px; overflow: hidden; display: inline-block; vertical-align: middle; border-radius: 99px; background: #e5e7eb; }
.payment-progress span { display: block; height: 100%; border-radius: inherit; background: #128c52; }
.payment-table td { white-space: nowrap; }
.payment-form-total, .payment-detail-summary { display: flex; flex-wrap: wrap; gap: 18px; padding: 14px; border: 1px solid #dce5ed; border-radius: 8px; background: #f8fafc; color: #58708f; font-size: .78rem; }
.payment-form-total strong, .payment-detail-summary strong { color: #0d162b; }
.installment-row { display: grid; grid-template-columns: 28px minmax(120px, 1.4fr) minmax(110px, .8fr) minmax(130px, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.installment-number { color: #58708f; font-weight: 700; text-align: center; }
.installment-actions { display: flex; gap: 3px; }
.installment-actions .btn { width: 30px; height: 30px; padding: 0; }
.payment-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.payment-detail-summary span, .payment-detail-summary strong { display: block; }
.payment-detail-summary span { color: #58708f; font-size: .72rem; }
.payment-detail-summary strong { margin-top: 6px; font-size: 1.1rem; }
.payment-timeline-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e5e7eb; }
.payment-timeline-item:last-child { border-bottom: 0; }
.booking-modal-backdrop { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 12px; background: rgba(15, 23, 42, .52); }
.booking-modal-backdrop[hidden], .booking-modal-backdrop:not(.is-open) { display: none !important; visibility: hidden; }
.booking-modal-backdrop.is-open { display: grid !important; visibility: visible; }
.booking-modal { width: min(100%, 360px); max-height: calc(100vh - 16px); overflow: hidden auto; border: 1px solid #dce5ed; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(13, 22, 43, .25); }
.booking-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 28px 22px 18px; }
.booking-modal-header h2 { margin: 0; color: #0d162b; font-size: 1.05rem; }
.booking-modal-close { border: 0; padding: 4px; color: #0d162b; background: transparent; font-size: 1rem; }
.booking-modal-body { display: grid; gap: 18px; padding: 0 22px 12px; }
.booking-field { display: grid; gap: 8px; margin: 0; }
.booking-field > span { color: #0d162b; font-size: .78rem; font-weight: 700; }
.booking-field input, .booking-field select { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #d4dfeb; border-radius: 10px; color: #38516f; background: #fff; font: inherit; }
.booking-field input[readonly] { background: #fff; }
.booking-reminder-row { display: flex; align-items: center; gap: 7px; }
.booking-reminder-row input { flex: 1; }
.booking-add-reminder { width: 26px; height: 26px; border: 0; border-radius: 8px; color: #0d162b; background: #eef2f6; }
.booking-help { margin: 0; color: #7a8ca3; font-size: .72rem; line-height: 1.45; }
.booking-error { min-height: 0; color: #dc2626; font-size: .7rem; }
.booking-modal-footer { padding: 12px 22px 22px; }
body.booking-modal-open { overflow: hidden; }

.flow-builder-card { padding: 0; overflow: hidden; }
.flow-builder-heading { padding: 22px 28px 18px; margin: 0; border-bottom: 1px solid #dce5ed; }
.flow-safety-note { color: #078b67; font-size: .78rem; font-weight: 700; }
.flow-builder-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 430px; }
.flow-palette { padding: 22px 18px; background: #fff; border-right: 1px solid #dce5ed; }
.flow-palette-title { display: block; color: #58708f; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.flow-palette-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-bottom: 10px; padding: 10px 14px; color: #10213f; background: #f8fbfd; border: 1px solid #cbd9e5; text-align: left; font-size: .82rem; cursor: pointer; }
.flow-palette-item:hover { border-color: #08b98a; background: #effbf7; }
.flow-palette-item i { color: #06b98a; font-size: 1rem; }
.flow-canvas-wrap { min-width: 0; overflow: auto; background: #fbfdff; }
.flow-canvas { position: relative; min-width: 900px; min-height: 430px; background-image: radial-gradient(#d3e2ec 1px, transparent 1px); background-size: 16px 16px; }
.flow-canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #7890a7; font-size: .9rem; }
.flow-canvas-empty[hidden] { display: none; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow-connection { fill: none; stroke: #7e93a8; stroke-width: 2; stroke-dasharray: 5 4; }
.flow-node { position: absolute; z-index: 2; width: 180px; min-height: 150px; border: 1px solid #10213f; box-shadow: 0 8px 16px rgba(14, 32, 54, .14); color: #08152e; }
.flow-node.trigger { background: #10e3e2; }.flow-node.text { background: #16e4e2; }.flow-node.menu { background: #ff0b0b; color: #070707; }
.flow-node header { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 12px 10px; border-bottom: 1px solid rgba(0,0,0,.38); cursor: grab; }
.flow-node header:active { cursor: grabbing; }.flow-node header strong { font-size: .87rem; }.flow-node header i { font-size: 1rem; }.flow-node-delete { margin-left: auto; padding: 0 2px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.flow-port { position: absolute; z-index: 4; top: 73px; width: 18px; height: 18px; border: 2px solid #111827; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.flow-port-in { left: -10px; background: #fff200; }.flow-port-out { right: -10px; background: #fff; }
.flow-port:hover { transform: scale(1.18); cursor: crosshair; }.flow-connecting .flow-port-in { background: #12d39a; box-shadow: 0 0 0 4px rgba(18, 211, 154, .25); }
.flow-node > div { padding: 12px; }.flow-node label { display: block; margin-bottom: 8px; font-size: .68rem; line-height: 1.2; }.flow-node input, .flow-node textarea { display: block; width: 100%; margin-top: 6px; padding: 7px 8px; border: 0; background: #fff; color: #25364d; font: inherit; font-size: .7rem; resize: vertical; }.flow-node textarea { min-height: 48px; }
.flow-save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 15px 28px; border-top: 1px solid #dce5ed; }
@media (max-width: 768px) { .flow-builder-layout { grid-template-columns: 1fr; }.flow-palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-right: 0; border-bottom: 1px solid #dce5ed; }.flow-palette-title { grid-column: 1/-1; margin-bottom: 0; }.flow-palette-item { margin: 0; padding: 8px; min-height: 42px; font-size: .7rem; }.flow-save-bar { align-items: stretch; flex-direction: column; gap: 8px; } }
.timeline-marker { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid #cbd5e1; border-radius: 50%; color: #64748b; }
.timeline-marker.paid { color: #fff; border-color: #128c52; background: #128c52; }
.timeline-content { display: grid; gap: 3px; min-width: 0; }
.timeline-content span, .timeline-content small { color: #58708f; font-size: .75rem; }

@media (max-width: 991.98px) {
  .payment-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-filters { flex-wrap: wrap; }
  .payment-search, .payment-filters select { max-width: none; flex: 1 1 240px; }
}

@media (max-width: 575.98px) {
  .page-toolbar { align-items: flex-start; flex-direction: column; }
  .payment-summary-grid { grid-template-columns: 1fr; }
  .payment-detail-summary { grid-template-columns: 1fr 1fr; }
  .installment-row { grid-template-columns: 28px 1fr 1fr; }
  .installment-row input[name="installment_due_date"] { grid-column: 2 / 4; }
  .installment-actions { grid-column: 2 / 4; }
}

@media (max-width: 991.98px) {
  .dashboard-activity-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .dashboard-activity-title { min-width: 100%; margin-right: 0; }
}

@media (max-width: 575.98px) {
  .dashboard-date-chips { order: 2; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .dashboard-date-picker { order: 3; flex: 1 1 auto; }
  .dashboard-date-picker input { width: 100%; }
  .dashboard-date-reset { order: 3; }
}

/* Give the brand enough room to remain on one line. */
.brand-mark > span:last-child { min-width: 0; }
.brand-mark strong { white-space: nowrap; }

@media (min-width: 1200px) {
  .app-sidebar { width: 320px; }
  .app-main {
    margin-left: 320px;
    max-width: calc(100vw - 320px);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .app-sidebar { width: 280px; }
  .app-main {
    margin-left: 280px;
    max-width: calc(100vw - 280px);
  }
}


/* Admin attachment composer */
.attachment-toolbar { display:flex; align-items:center; gap:10px; }
.attachment-button { border-radius:9px; }
.attachment-help { color:#667085; font-size:.78rem; }
.attachment-panel { display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:10px; align-items:center; margin-top:9px; padding:10px; border:1px solid #d7dde4; border-radius:10px; background:#fff; }
.attachment-preview { width:54px; height:54px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:8px; background:#eef3f8; }
.attachment-preview img, .attachment-thumbnail { display:block; width:54px !important; height:54px !important; max-width:54px !important; max-height:54px !important; object-fit:cover; }
.attachment-pdf-icon { color:#d92d20; font-size:2rem; }
.attachment-details { min-width:0; display:flex; flex-direction:column; gap:3px; }
.attachment-details strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-details small { color:#667085; }
.attachment-caption { margin-top:4px; }
.attachment-remove { grid-column:3; grid-row:1; align-self:start; padding:2px 5px; }
.attachment-send { grid-column:2 / 4; justify-self:end; }
.chat-media-caption { margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width: 620px) {
  .attachment-help { display:none; }
  .attachment-panel { grid-template-columns:48px minmax(0,1fr) auto; }
  .attachment-preview { width:48px; height:48px; }
}

.attachment-panel[hidden] { display:none !important; }
.attachment-panel:not([hidden]) { display:grid !important; max-width:100%; max-height:130px; overflow:hidden; }
.attachment-remove { white-space:nowrap; }

.unread-count { display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; padding:0 6px; margin-left:auto; border-radius:999px; background:#25d366; color:#fff; font-size:.72rem; font-weight:700; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.16); }
.conversation-meta { display:flex; align-items:center; gap:8px; }

.whatsapp-composer { display:flex; align-items:flex-end; gap:8px; padding:7px 8px; min-height:52px; border:1px solid #d4dce5; border-radius:24px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.08); }
.composer-input { flex:1; min-height:34px; max-height:110px; resize:vertical; border:0 !important; outline:0 !important; box-shadow:none !important; padding:7px 4px; line-height:1.35; background:transparent !important; }
.composer-attach, .composer-send { width:34px; height:34px; flex:0 0 34px; border:0; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; }
.composer-attach { color:#667085; background:transparent; }
.composer-attach:hover { color:#128c7e; background:#eef8f5; }
.composer-send { color:#fff; background:#128c7e; }
.composer-send:hover { background:#0b765f; }
.composer-send:disabled, .composer-attach:disabled { opacity:.5; cursor:not-allowed; }
.composer-status { color:#667085; font-size:.75rem; }
.attachment-toolbar { min-height:18px; }

.reply-box { position:relative; }
.attachment-menu { position:absolute; left:14px; bottom:62px; z-index:30; width:220px; padding:8px 0; border:1px solid #3a414a; border-radius:14px; background:#202326; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.attachment-menu[hidden] { display:none !important; }
.attachment-menu-item { display:flex; align-items:center; gap:12px; width:100%; padding:10px 16px; border:0; background:transparent; color:#f5f7fa; font-size:.9rem; text-align:left; }
.attachment-menu-item:hover:not(:disabled) { background:#34383d; }
.attachment-menu-item i { width:18px; font-size:1rem; }
.attachment-menu-item.is-disabled { opacity:.45; cursor:not-allowed; }
.text-purple { color:#9b7bea; } .text-blue { color:#4da3ff; } .text-pink { color:#ff4f91; } .text-orange { color:#ff8c42; } .text-cyan { color:#31b9e8; } .text-yellow { color:#f7c844; } .text-magenta { color:#f05cae; } .text-green { color:#25d366; }

.whatsapp-composer { gap:6px; padding:7px 9px; border:0; border-radius:28px; background:#f0f2f5; box-shadow:none; }
.composer-attach, .composer-emoji { width:38px; height:38px; flex-basis:38px; color:#54656f; font-size:1.25rem; }
.composer-attach:hover, .composer-emoji:hover { color:#128c7e; background:#dfe9e7; }
.composer-input { min-height:38px; padding:9px 6px; font-size:.95rem; }
.composer-send { width:38px; height:38px; flex-basis:38px; font-size:1rem; }
.attachment-help, .composer-status, .reply-state { font-size:.72rem; color:#667085; }
.attachment-menu { left:14px; bottom:68px; border-radius:9px; padding:8px 0; background:#202326; }
.emoji-menu { position:absolute; z-index:31; left:58px; bottom:68px; width:270px; padding:13px; border:1px solid #d7dde4; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.2); font-size:1.45rem; line-height:2; word-spacing:7px; cursor:pointer; }
.emoji-menu[hidden] { display:none !important; }

.emoji-menu button { border:0; background:transparent; padding:2px 4px; font-size:1.35rem; line-height:1.7; cursor:pointer; border-radius:6px; }
.emoji-menu button:hover { background:#eef3f5; }

/* Final WhatsApp composer sizing override */
.reply-box .whatsapp-composer { width:100% !important; min-height:54px !important; display:flex !important; align-items:center !important; gap:7px !important; padding:7px 10px !important; border:1px solid #d5dde5 !important; border-radius:28px !important; background:#f0f2f5 !important; box-sizing:border-box !important; }
.reply-box .composer-input { display:block !important; flex:1 1 auto !important; width:auto !important; min-width:0 !important; height:38px !important; min-height:38px !important; max-height:120px !important; resize:none !important; border:0 !important; border-radius:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; padding:9px 5px !important; font:400 15px/20px Arial,sans-serif !important; color:#111827 !important; }
.reply-box .composer-attach, .reply-box .composer-emoji, .reply-box .composer-send { display:grid !important; place-items:center !important; flex:0 0 38px !important; width:38px !important; height:38px !important; padding:0 !important; border-radius:50% !important; }
.reply-box .composer-attach, .reply-box .composer-emoji { border:0 !important; background:transparent !important; color:#54656f !important; }
.reply-box .composer-send { border:0 !important; background:#128c7e !important; color:#fff !important; }

/* WhatsApp uses one composer send button for both text and attachments. */
.attachment-panel .attachment-send { display:none !important; }

.chat-media-video { display:block; width:min(100%, 320px); max-height:360px; border-radius:10px; margin:8px 0; background:#111; }
.chat-video-embed { display:block; width:min(100%, 420px); height:260px; border:0; border-radius:10px; margin:8px 0; background:#111; }
.chat-video-link { display:inline-block; margin:0 0 6px; color:#087c57; font-size:.82rem; font-weight:600; }

/* Use the supplied My Travel Way logo as the sidebar brand. */
.brand-logo-mark {
  display:flex;
  align-items:center;
  min-height:92px;
  padding:6px 0;
}
.brand-logo-mark .brand-logo {
  display:block;
  width:190px;
  max-width:100%;
  height:auto;
  max-height:82px;
  object-fit:contain;
}

/* Restore the original compact dark navigation shell. */
.app-sidebar {
  width: 288px !important;
  background: #0d162b !important;
  color: #e9f1ee !important;
}
.app-main {
  margin-left: 288px !important;
  max-width: calc(100vw - 288px) !important;
}
.sidebar-footer { background: #0d162b !important; }
.brand-logo-mark { min-height: 142px !important; }

@media (max-width: 991.98px) {
  .app-main { margin-left: 0 !important; max-width: none !important; }
}

@media (min-width: 992px) {
  .app-sidebar { width: 260px !important; }
  .app-main { margin-left: 260px !important; max-width: calc(100vw - 260px) !important; }
}

/* The inbox is a complete workspace, so it does not need the dashboard overview header. */
body:has(.inbox-shell) .app-main > .topbar { display:none !important; }
body:has(.inbox-shell) .app-content { padding:0 !important; }
body:has(.inbox-shell) .inbox-shell {
  height:100vh !important;
  min-height:0 !important;
  border:0 !important;
  box-shadow:none !important;
}

@media (min-width: 992px) {
  /* Keep the inbox flush against the sidebar with no empty strip. */
  .app-sidebar { width:240px !important; }
  .app-main { margin-left:240px !important; max-width:calc(100vw - 240px) !important; }
}

@media (min-width: 992px) {
  body:has(.inbox-shell) .inbox-shell {
    margin-left:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  body:has(.inbox-shell) .app-sidebar { width:280px !important; }
  body:has(.inbox-shell) .app-main { margin-left:280px !important; max-width:calc(100vw - 280px) !important; }
  body:has(.inbox-shell) .inbox-shell:has(.thread-header) { grid-template-columns:340px minmax(0, 1fr) !important; }
}

.thread-header { display:flex !important; align-items:center; gap:12px; }
.thread-header > div:first-child { min-width:0; }
.thread-header-tools { flex:0 0 auto; }
.open-lead-button { white-space:nowrap; }
.reply-box .composer-input {
  color:#111827 !important;
  opacity:1 !important;
  min-height:38px !important;
  height:42px !important;
  max-height:120px !important;
  overflow-y:auto !important;
  white-space:pre-wrap !important;
}

/* Restore the morning inbox page framing and proportions. */
@media (min-width: 992px) {
  .app-sidebar { width: 260px !important; }
  .app-main { margin-left: 260px !important; max-width: calc(100vw - 260px) !important; }
  .app-main > .topbar { display:flex !important; }
  .app-content { padding: 44px 24px !important; }
  .inbox-shell { height: calc(100vh - 150px) !important; min-height: 540px !important; }
  .inbox-shell:has(.thread-header) { grid-template-columns: 306px minmax(0, 1fr) !important; }
}

/* Restore the white morning sidebar theme. */
.app-sidebar {
  background: #fff !important;
  color: #203b70 !important;
  border-right: 1px solid #dfe7f1 !important;
}
.app-main { margin-left: 288px !important; max-width: calc(100vw - 288px) !important; }
.brand-mark, .brand-mark strong { color: #203b70 !important; }
.brand-mark small { color: #71829d !important; }
.sidebar-link { color: #294574 !important; }
.sidebar-link:hover, .sidebar-link.active { background: #eee8ff !important; color: #5b35df !important; box-shadow: none !important; }
.sidebar-footer { background: #fff !important; }
.admin-chip { border-color: #d8e1ed !important; color: #71829d !important; }
.sidebar-nav { scrollbar-color: #c9d3e1 transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: #c9d3e1; }

/* Balanced inbox proportions: a comfortable sidebar with a wider chat list. */
@media (min-width: 992px) {
  body:has(.inbox-shell) .app-sidebar { width:280px !important; }
  body:has(.inbox-shell) .app-main { margin-left:280px !important; max-width:calc(100vw - 280px) !important; }
  body:has(.inbox-shell) .inbox-shell:has(.thread-header) { grid-template-columns:340px minmax(0, 1fr) !important; }
}

/* Match the compact WhatsApp chat-list proportions from the reference. */
@media (min-width: 992px) {
  body:has(.inbox-shell) .app-sidebar { width:250px !important; }
  body:has(.inbox-shell) .app-main { margin-left:250px !important; max-width:calc(100vw - 250px) !important; }
  body:has(.inbox-shell) .inbox-shell:has(.thread-header) { grid-template-columns:306px minmax(0, 1fr) !important; }
}

body:has(.inbox-shell) .inbox-title-row { padding:14px 16px 10px !important; }
body:has(.inbox-shell) .inbox-title-row h2 { font-size:1rem !important; }
body:has(.inbox-shell) .inbox-actions { gap:8px !important; }
body:has(.inbox-shell) .inbox-filters { padding:8px 12px 6px !important; }
body:has(.inbox-shell) .date-filter-chips { padding:6px 12px 3px !important; gap:4px !important; }
body:has(.inbox-shell) .segment-chip { font-size:.68rem !important; padding:3px 8px !important; }
body:has(.inbox-shell) .date-picker-row { margin-bottom:6px !important; }
body:has(.inbox-shell) .conversation-card {
  height:70px !important;
  min-height:70px !important;
  max-height:70px !important;
  padding:9px 48px 7px 66px !important;
}
body:has(.inbox-shell) .conversation-avatar {
  width:40px !important;
  height:40px !important;
  left:12px !important;
  top:14px !important;
  font-size:1.1rem !important;
}
body:has(.inbox-shell) .conversation-card .conversation-top strong { font-size:.88rem !important; }
body:has(.inbox-shell) .conversation-card .conversation-top time { top:10px !important; right:10px !important; font-size:.65rem !important; }
body:has(.inbox-shell) .conversation-card .conversation-meta { font-size:.64rem !important; margin-top:1px !important; }
body:has(.inbox-shell) .conversation-card p { font-size:.72rem !important; margin-top:2px !important; }
/* Keep hover subtle so the selected conversation is unmistakable. */
body:has(.inbox-shell) .conversation-card:hover { background:#f7fafc !important; }
body:has(.inbox-shell) .conversation-card.active,
body:has(.inbox-shell) .conversation-card.active:hover {
  background:#e6f3fb !important;
  box-shadow:inset 3px 0 0 #128caa !important;
}
/* Fallback for browsers that do not evaluate :has() consistently. */
.inbox-shell .conversation-card:hover {
  background:#f7fafc !important;
}
.inbox-shell .conversation-card.active,
.inbox-shell .conversation-card.active:hover {
  background:#e6f3fb !important;
  box-shadow:inset 3px 0 0 #128caa !important;
}
.inbox-shell .conversation-list .conversation-card.active:hover {
  background:#e6f3fb !important;
}
body:has(.inbox-shell) .date-filter-chips { align-items:center !important; }
body:has(.inbox-shell) .date-filter-chips .custom-list { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
body:has(.inbox-shell) .create-list-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 26px;
  width:26px;
  height:26px;
  border:1px solid #b9c7d6;
  border-radius:50%;
  color:#243b5a;
  background:#fff;
  text-decoration:none;
  font-size:.78rem;
  line-height:1;
}
body:has(.inbox-shell) .create-list-chip:hover,
body:has(.inbox-shell) .create-list-chip:focus-visible {
  border-color:#128c7e;
  color:#128c7e;
  background:#f0faf8;
}
body:has(.inbox-shell) .date-filter-chips {
  position:relative !important;
  padding-right:44px !important;
  overflow:hidden !important;
}
body:has(.inbox-shell) .date-filter-chips .create-list-chip {
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3 !important;
  background:#fff !important;
}
body:has(.inbox-shell) .inbox-list-panel { position:relative !important; }
body:has(.inbox-shell) .inbox-create-list-chip {
  position:absolute !important;
  top:116px !important;
  right:10px !important;
  z-index:8 !important;
  transform:none !important;
}
body:has(.inbox-shell) .inbox-filter-strip {
  position:relative !important;
  min-width:0 !important;
  background:#fff !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips {
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding-right:44px !important;
  scrollbar-width:none !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips::-webkit-scrollbar { display:none !important; }
body:has(.inbox-shell) .inbox-filter-strip .inbox-create-list-chip {
  top:50% !important;
  right:10px !important;
  transform:translateY(-50%) !important;
  box-shadow:0 0 0 4px #fff !important;
}
/* Keep the list chips horizontally scrollable with a visible scrollbar. */
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips {
  overflow-x:scroll !important;
  scrollbar-width:thin !important;
  scrollbar-color:#9aabba #edf1f5 !important;
  padding-bottom:7px !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips::-webkit-scrollbar {
  display:block !important;
  height:6px !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips::-webkit-scrollbar-track { background:#edf1f5 !important; }
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips::-webkit-scrollbar-thumb { background:#9aabba !important; border-radius:6px !important; }
body:has(.inbox-shell) .chip-scrollbar {
  display:block !important;
  width:calc(100% - 18px) !important;
  height:8px !important;
  margin:1px 9px 4px !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  cursor:pointer;
}
body:has(.inbox-shell) .chip-scrollbar::-webkit-slider-runnable-track {
  height:4px;
  border-radius:4px;
  background:#dfe5eb;
}
body:has(.inbox-shell) .chip-scrollbar::-webkit-slider-thumb {
  width:28px;
  height:6px;
  margin-top:-1px;
  border:0;
  border-radius:6px;
  background:#94a2b1;
  -webkit-appearance:none;
}
body:has(.inbox-shell) .chip-scrollbar::-moz-range-track {
  height:4px;
  border-radius:4px;
  background:#dfe5eb;
}
body:has(.inbox-shell) .chip-scrollbar::-moz-range-thumb {
  width:28px;
  height:6px;
  border:0;
  border-radius:6px;
  background:#94a2b1;
}
body:has(.inbox-shell) .conversation-list {
  scrollbar-width:thin !important;
  scrollbar-color:#9aa8b6 #eef2f5 !important;
}
body:has(.inbox-shell) .conversation-list::-webkit-scrollbar {
  display:block !important;
  width:8px !important;
}
body:has(.inbox-shell) .conversation-list::-webkit-scrollbar-track { background:#eef2f5 !important; }
body:has(.inbox-shell) .conversation-list::-webkit-scrollbar-thumb {
  background:#9aa8b6 !important;
  border-radius:8px !important;
  border:2px solid #eef2f5 !important;
}
body:has(.inbox-shell) .inbox-filter-strip { position:relative !important; }
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips {
  padding-left:30px !important;
  padding-right:30px !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips::-webkit-scrollbar { display:none !important; }
body:has(.inbox-shell) .chip-scroll-button {
  position:absolute !important;
  top:50% !important;
  z-index:6 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  padding:0 !important;
  transform:translateY(-50%) !important;
  border:1px solid #c8d3df !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#294574 !important;
  cursor:pointer !important;
  box-shadow:0 1px 3px rgba(15,23,42,.12) !important;
}
body:has(.inbox-shell) .chip-scroll-button:hover { border-color:#128c7e !important; color:#075e54 !important; }
body:has(.inbox-shell) .chip-scroll-prev { left:3px !important; }
body:has(.inbox-shell) .chip-scroll-next { right:3px !important; }
body:has(.inbox-shell) .inbox-filter-strip .inbox-create-list-chip { right:32px !important; }
body:has(.inbox-shell) .inbox-filter-strip > .inbox-create-list-chip {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  padding:0 !important;
  top:50% !important;
  right:31px !important;
  transform:translateY(-50%) !important;
  z-index:12 !important;
  border:1px solid #9aaabd !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#294574 !important;
  line-height:1 !important;
  text-decoration:none !important;
}
body:has(.inbox-shell) .inbox-filter-strip > .inbox-create-list-chip:hover { border-color:#128c7e !important; color:#075e54 !important; }
body:has(.inbox-shell) .inbox-filter-strip > .filter-add-button {
  position:absolute !important;
  right:31px !important;
  top:50% !important;
  z-index:20 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  border:1px solid #9aaabd !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#294574 !important;
  font-size:18px !important;
  font-weight:500 !important;
  line-height:1 !important;
  text-decoration:none !important;
  transform:translateY(-50%) !important;
}
body:has(.inbox-shell) .inbox-filter-strip > .filter-add-button:hover { border-color:#128c7e !important; color:#075e54 !important; }
/* Refined filter carousel: controls get their own space instead of covering chips. */
body:has(.inbox-shell) .inbox-filter-strip {
  display:grid !important;
  grid-template-columns:28px minmax(0,1fr) 28px !important;
  align-items:center !important;
  gap:4px !important;
  min-height:38px !important;
  padding:4px 6px !important;
  background:#fff !important;
  position:relative !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips {
  min-width:0 !important;
  padding:2px 0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips::-webkit-scrollbar { display:none !important; }
body:has(.inbox-shell) .inbox-filter-strip .chip-scroll-button {
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:26px !important;
  height:26px !important;
  padding:0 !important;
  transform:none !important;
  border:1px solid #d4dde7 !important;
  border-radius:7px !important;
  background:#f8fafc !important;
  color:#38516e !important;
  box-shadow:none !important;
}
body:has(.inbox-shell) .inbox-filter-strip .chip-scroll-button:hover {
  border-color:#128c7e !important;
  background:#eef8f6 !important;
  color:#075e54 !important;
}
body:has(.inbox-shell) .inbox-create-list-header {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  border:1px solid #c9d5e2 !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#294574 !important;
  font-size:1.08rem !important;
  font-weight:500 !important;
  line-height:1 !important;
  text-decoration:none !important;
}
body:has(.inbox-shell) .inbox-create-list-header:hover {
  border-color:#128c7e !important;
  background:#eef8f6 !important;
  color:#075e54 !important;
}
body:has(.inbox-shell) .inbox-filter-strip .chip-scroll-button {
  width:28px !important;
  height:28px !important;
  border:1px solid #cbd5df !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#243b5a !important;
  font-size:.8rem !important;
  box-shadow:0 1px 4px rgba(15,23,42,.14) !important;
}
body:has(.inbox-shell) .inbox-filter-strip .chip-scroll-button:hover {
  border-color:#128c7e !important;
  background:#eef8f6 !important;
  color:#075e54 !important;
  box-shadow:0 2px 7px rgba(18,140,126,.18) !important;
}
body:has(.inbox-shell) .inbox-filter-strip {
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
}
body:has(.inbox-shell) .inbox-filter-strip .chip-scroll-button {
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  border:1px solid #c6d1dc !important;
  background:#ffffff !important;
  color:#1f3b5d !important;
  font-family:inherit !important;
  font-size:14px !important;
  line-height:30px !important;
  text-align:center !important;
  box-sizing:border-box !important;
  box-shadow:0 2px 6px rgba(31,59,93,.16) !important;
  cursor:pointer !important;
}
body:has(.inbox-shell) .inbox-filter-strip .chip-scroll-button i {
  display:block !important;
  line-height:28px !important;
  pointer-events:none !important;
}
body:has(.inbox-shell) .inbox-filter-strip .chip-scroll-button:hover {
  transform:translateY(-1px) !important;
  border-color:#128c7e !important;
  background:#f1fbf8 !important;
  color:#075e54 !important;
}
body:has(.inbox-shell) .inbox-filter-strip .date-filter-chips {
  position:relative !important;
  align-items:center !important;
  gap:6px !important;
  padding:3px 6px !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap {
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  gap:2px !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap form { display:inline-flex !important; margin:0 !important; }
body:has(.inbox-shell) .custom-list-delete {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#8b9bad !important;
  font-size:15px !important;
  line-height:18px !important;
  cursor:pointer !important;
}
body:has(.inbox-shell) .custom-list-delete:hover {
  background:#fff0f1 !important;
  color:#d64545 !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  height:28px !important;
  flex:0 0 auto !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap form {
  position:absolute !important;
  top:-5px !important;
  right:-5px !important;
  z-index:4 !important;
  display:block !important;
  margin:0 !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap .custom-list-delete {
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  padding:0 !important;
  border:1px solid #cbd5df !important;
  border-radius:50% !important;
  background:#fff !important;
  color:#718096 !important;
  font-size:11px !important;
  line-height:13px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.18) !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap {
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;
  height:26px !important;
  min-height:26px !important;
  padding:0 4px 0 9px !important;
  border:1px solid #b9c7d6 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#243b5a !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap.active { background:#111827 !important; border-color:#111827 !important; color:#fff !important; }
body:has(.inbox-shell) .custom-list-link {
  display:inline-flex !important;
  align-items:center !important;
  max-width:86px !important;
  overflow:hidden !important;
  color:inherit !important;
  font-size:.7rem !important;
  font-weight:600 !important;
  line-height:24px !important;
  text-decoration:none !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap form {
  position:static !important;
  display:inline-flex !important;
  margin:0 !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap .custom-list-delete {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:17px !important;
  height:17px !important;
  min-width:17px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:#718096 !important;
  font-size:14px !important;
  line-height:16px !important;
  box-shadow:none !important;
}
body:has(.inbox-shell) .custom-list-chip-wrap.active .custom-list-delete { color:#dbeafe !important; }
body:has(.inbox-shell) .custom-list-chip-wrap .custom-list-delete:hover { background:#fff0f1 !important; color:#d64545 !important; }
body:has(.inbox-shell) .wa-filter-strip { padding:7px 12px 6px !important; }
body:has(.inbox-shell) .wa-filter-bar {
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  overflow:visible;
}
body:has(.inbox-shell) .wa-filter-pill,
body:has(.inbox-shell) .wa-filter-menu-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:28px;
  padding:4px 12px;
  border:1px solid #34404a;
  border-radius:999px;
  background:#fff;
  color:#34404a;
  text-decoration:none;
  font-size:.72rem;
  line-height:1;
  white-space:nowrap;
}
body:has(.inbox-shell) .wa-filter-pill.active { background:#075e54; border-color:#075e54; color:#fff; }
body:has(.inbox-shell) .wa-filter-pill:hover,
body:has(.inbox-shell) .wa-filter-menu-toggle:hover { border-color:#128c7e; color:#075e54; }
body:has(.inbox-shell) .wa-filter-menu-toggle { width:30px; padding:4px; cursor:pointer; }
body:has(.inbox-shell) .wa-filter-menu {
  position:absolute;
  top:34px;
  right:0;
  z-index:20;
  min-width:165px;
  padding:8px 0;
  border:1px solid #d9e0e7;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.18);
}
body:has(.inbox-shell) .wa-filter-menu a {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 14px;
  color:#243b5a;
  font-size:.78rem;
  text-decoration:none;
  white-space:nowrap;
}
body:has(.inbox-shell) .wa-filter-menu a:hover { background:#eef7f5; color:#075e54; }
body:has(.inbox-shell) .wa-filter-menu-divider { height:1px; margin:6px 0; background:#e5e9ee; }
@media (max-width: 991.98px) {
  .app-main { margin-left: 0 !important; max-width: none !important; }
}