/* ==========================================================================
   V2: bulk bar, view chips, source column, WhatsApp sheet, import, dialogs
   ========================================================================== */
#toast.toast-popup { z-index: 400 !important; }

/* Floating bulk-action bar (appears when leads are ticked) */
#selectionToolbar.selection-toolbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 150; margin: 0; padding: 8px 10px 8px 14px; gap: 8px;
  background: #111827; color: #fff; border: 0; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .35); font-size: .8rem;
  max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center;
}
#selectionToolbar #selectedCountText { font-weight: 700; white-space: nowrap; }
#selectionToolbar select {
  height: 32px; font-size: .78rem; border-radius: 8px; border: 1px solid #374151;
  background: #1f2937; color: #fff; padding: 0 8px; max-width: 170px;
}
#selectionToolbar #btnExecuteQuickAssign { height: 32px; min-height: 32px; padding: 0 14px; font-size: .78rem; border-radius: 8px; }
#selectionToolbar .btn-clear-sel { color: #9ca3af; font-size: 1rem; padding: 0 4px; }
.sel-sep { width: 1px; height: 20px; background: #374151; }
.btn-sel-link { background: none; border: 0; color: #93c5fd; font-weight: 700; font-size: .76rem; cursor: pointer; text-decoration: underline; padding: 0; white-space: nowrap; }
.bulk-more-wrap { position: relative; }
.btn-bulk-more { height: 32px; width: 34px; border-radius: 8px; border: 1px solid #374151; background: #1f2937; color: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1; }
.bulk-more-menu {
  position: absolute; right: 0; bottom: 40px; min-width: 220px; background: #fff; color: var(--text-main);
  border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.bulk-more-menu[hidden] { display: none; }
.bulk-more-menu button { text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 6px; font-size: .8rem; cursor: pointer; color: inherit; }
.bulk-more-menu button:hover { background: var(--bg-app); }
.bulk-more-menu button.danger { color: #b91c1c; }

/* Active-view chips ("what am I looking at") */
#activeFilterBadge { display: none !important; }
.v2-view-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 6px; }
.v2-view-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary-border); font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.v2-view-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: .8rem; padding: 0 4px; line-height: 1; }
.v2-view-chip.clear-all { background: #fff; color: var(--text-secondary); border-color: var(--border-color); padding-right: 9px; cursor: pointer; }

/* Source column + stacked progress filter */
.th-source { width: 120px; min-width: 100px; }
.td-source { font-size: .72rem; }
.badge-src { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-weight: 600; white-space: nowrap; font-size: .7rem; }
.badge-src.own { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.col-filter-work { margin-top: 4px; }

/* Clickable team numbers */
.v2-clickable { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.v2-clickable:hover { border-color: var(--primary) !important; box-shadow: 0 0 0 2px var(--primary-light); }

/* Assign modal: plain words about the current view */
.v2-view-summary { padding: 9px 11px; border-radius: 8px; background: #f8fafc; border: 1px solid var(--border-color); font-size: .76rem; line-height: 1.5; color: var(--text-main); }
.v2-view-summary .v2-view-chip { margin: 2px 3px 2px 0; }
.v2-view-summary:empty { display: none; }

/* Lead story (owner panel + telecaller workspace) */
.v2-history { margin: 8px 0; padding: 8px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: .74rem; color: #422006; display: flex; flex-direction: column; gap: 3px; }
.v2-history-title { font-weight: 800; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: #92400e; }
.v2-hist-row span { color: #78716c; }
.v2-hand { color: #c2410c; font-weight: 600; }
.v2-note { white-space: pre-wrap; }

/* Telecaller "what changed" notice */
.v2-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: .82rem; line-height: 1.5; }

/* Simple question dialog */
.v2-ask-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.v2-ask-buttons button { height: 40px; font-weight: 700; font-size: .84rem; border-radius: 8px; }

/* WhatsApp sheet */
.v2-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 6px; letter-spacing: .03em; }
.v2-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-chip { border: 1px solid var(--border-color); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; color: var(--text-main); }
.v2-chip.active { background: #ecfdf5; border-color: #10b981; color: #047857; }
.v2-wa-text { min-height: 110px; font-size: .85rem; line-height: 1.45; }
.v2-attach-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; font-size: .78rem; }
.v2-wa-steps { display: flex; flex-direction: column; gap: 8px; }
.v2-btn-wa, .v2-btn-wa2 { height: 46px; border-radius: 10px; font-weight: 800; font-size: .9rem; cursor: pointer; border: 0; }
.v2-btn-wa { background: #16a34a; color: #fff; }
.v2-btn-wa:disabled { background: #cbd5e1; cursor: not-allowed; }
.v2-btn-wa2 { background: #fff; color: #047857; border: 2px solid #16a34a; }
.v2-btn-wa2.ready { background: #16a34a; color: #fff; }
.v2-hint { font-size: .72rem; color: var(--text-secondary); line-height: 1.45; }

/* Template editor attachments */
.v2-tpl-title { border: 1px solid transparent; background: transparent; font-weight: 700; font-size: .8rem; color: var(--text-main); padding: 2px 4px; border-radius: 4px; min-width: 0; flex: 1; }
.v2-tpl-title:hover, .v2-tpl-title:focus { border-color: var(--border-color); background: #fff; outline: none; }
.v2-tpl-attach { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: .74rem; }
.v2-tpl-attach button, .v2-tpl-add { border: 1px dashed #94a3b8; background: #fff; border-radius: 6px; padding: 4px 10px; font-size: .74rem; cursor: pointer; color: var(--text-main); }
.v2-tpl-add { width: 100%; padding: 8px; font-weight: 700; }
.v2-file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 999px; font-weight: 600; max-width: 100%; }
.v2-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.v2-file-chip button { border: 0 !important; background: none !important; padding: 0 4px !important; color: #047857; font-size: .85rem; }
.v2-tpl-del { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: .85rem; opacity: .6; }
.v2-tpl-del:hover { opacity: 1; }

/* Import modal */
.v2-tabs { display: flex; gap: 4px; padding: 10px 18px 0; border-bottom: 1px solid var(--border-color); background: #f8fafc; }
.v2-tab { border: 0; background: none; padding: 8px 12px; font-size: .8rem; font-weight: 700; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; }
.v2-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.v2-step { display: flex; gap: 10px; align-items: flex-start; }
.v2-step-no { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.v2-link-btn { border: 0; background: none; color: var(--primary); font-weight: 700; cursor: pointer; margin-left: 8px; font-size: .78rem; text-decoration: underline; }
.v2-drop { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px; border: 2px dashed var(--primary-border); border-radius: 10px; background: var(--primary-light); cursor: pointer; text-align: center; }
.v2-drop span { font-weight: 700; color: var(--primary); }
.v2-drop small { color: var(--text-secondary); }
.v2-drop.drag { background: #e0e7ff; border-color: var(--primary); }
.v2-drop input { display: none; }
.v2-paste { margin-top: 8px; font-size: .76rem; }
.v2-paste summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; }
.v2-paste textarea { margin: 6px 0; font-size: .74rem; font-family: ui-monospace, monospace; }
.v2-map-wrap { overflow-x: auto; margin-top: 6px; border: 1px solid var(--border-color); border-radius: 8px; max-height: 240px; }
.v2-map-table { border-collapse: collapse; font-size: .72rem; width: max-content; min-width: 100%; }
.v2-map-table th, .v2-map-table td { border-bottom: 1px solid var(--border-subtle); padding: 5px 8px; text-align: left; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-map-table th { background: #f8fafc; position: sticky; top: 0; }
.v2-map-table th small { display: block; color: var(--text-muted); font-weight: 500; margin-bottom: 3px; }
.v2-map-table select { font-size: .72rem; height: 26px; border-radius: 6px; border: 1px solid var(--border-color); max-width: 170px; }
.v2-map-table select.req-ok { border-color: #10b981; background: #ecfdf5; }
.v2-map-table select.skip { color: var(--text-muted); }
.v2-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.v2-field { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--text-secondary); }
.v2-field .form-input-control { height: 36px; font-size: .82rem; font-weight: 500; }
.v2-field textarea.form-input-control { height: auto; }
.v2-span2 { grid-column: 1 / -1; }
.v2-req { color: #dc2626; }
.v2-summary { padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid var(--border-color); font-size: .8rem; line-height: 1.6; }
.v2-summary .ok { color: #047857; font-weight: 700; }
.v2-summary .dup { color: #b45309; font-weight: 700; }
.v2-summary .bad { color: #b91c1c; font-weight: 700; }
.v2-summary details { margin-top: 4px; font-size: .74rem; }
.v2-summary ul { margin: 4px 0 0; padding-left: 18px; max-height: 120px; overflow: auto; }
.v2-err { padding: 8px 10px; border-radius: 6px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: .78rem; font-weight: 600; }

#btnTcWhatsApp, #btnTcDialPhone { flex: 0 0 auto !important; min-width: max-content !important; }
#btnTcWhatsApp span, #btnTcDialPhone span { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; max-width: none !important; }
@media (max-width: 720px) {
  #selectionToolbar.selection-toolbar { bottom: 10px; width: calc(100vw - 20px); padding: 10px; }
  #selectionToolbar[style*="inline-flex"] {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
    grid-template-areas: "count close" "all all" "move go" "status more";
  }
  #selectionToolbar #selectedCountText { grid-area: count; text-align: left; }
  #selectionToolbar #btnClearSelectionBtn { grid-area: close; width: auto !important; }
  #selectionToolbar #btnSelectAllInView { grid-area: all; justify-self: start; }
  #selectionToolbar #quickAssignSelect { grid-area: move; width: 100% !important; max-width: none; }
  #selectionToolbar #btnExecuteQuickAssign { grid-area: go; width: auto !important; }
  #selectionToolbar #bulkStatusSelect { grid-area: status; width: 100% !important; max-width: none; }
  #selectionToolbar .bulk-more-wrap { grid-area: more; }
  #selectionToolbar .btn-bulk-more { width: 52px !important; }
  #selectionToolbar .sel-sep { display: none; }
  #selectionToolbar select { height: 38px; font-size: .85rem; }
  .v2-form-grid { grid-template-columns: 1fr; }
  .v2-notice { flex-direction: column; align-items: flex-start; }
}
html[data-theme="dark"] .bulk-more-menu, html[data-theme="dark"] .v2-chip, html[data-theme="dark"] .v2-view-chip.clear-all { background: #1e293b; color: #e2e8f0; }
html[data-theme="dark"] .v2-view-summary, html[data-theme="dark"] .v2-summary, html[data-theme="dark"] .v2-attach-line { background: #0f172a; color: #e2e8f0; }

/* ---- Live owner dashboard (live.js) ---- */
.v2-live-line{font-size:.66rem;color:var(--text-muted,#6b7280);margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;line-height:1.3}
.v2-idle{background:#fef3c7;color:#b45309;border-radius:999px;padding:0 6px;font-weight:600}
.v2-live-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-color,#e5e7eb);background:var(--bg-card,#fff);color:inherit;border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap}
.v2-live-chip:hover{border-color:#22c55e}
.v2-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);flex:none}
.v2-due{color:#dc2626}
.v2-imp-hint{font-size:.75rem;color:#b45309;font-weight:600;margin-right:auto;align-self:center}

/* ---- View as telecaller (view-as.js) ---- */
.view-as-banner{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:#fde047;color:#713f12;font-weight:700;font-size:0.82rem;padding:10px 16px;text-align:center;border-bottom:2px solid #eab308;}
.view-as-banner strong{font-weight:800;}
.view-as-back-btn{background:#713f12;color:#fff;border:1px solid #713f12;font-weight:700;padding:5px 14px;border-radius:6px;}
.view-as-back-btn:hover{background:#4a2a0c;}

/* ---- "Back to Team" / "Back to X" navigation chips (nav-back pattern) ---- */
.v2-back-chip{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;border-radius:999px;padding:4px 12px;font-size:.76rem;font-weight:600;cursor:pointer;margin-left:8px;}
.v2-back-chip:hover{background:#e0e7ff;}
.v2-back-btn{display:inline-flex;align-items:center;gap:4px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;border-radius:6px;padding:5px 10px;font-size:.74rem;font-weight:700;cursor:pointer;margin-bottom:8px;}
.v2-back-btn:hover{background:#e0e7ff;}
.team-detail-actions .v2-view-as-btn{color:#92400e;border-color:#fde68a;background:#fffbeb;}
.team-member-item .v2-view-as-mini{border:none;background:transparent;color:#92400e;cursor:pointer;font-size:.85rem;padding:2px 4px;border-radius:4px;flex-shrink:0;}
.team-member-item .v2-view-as-mini:hover{background:#fef3c7;}
.v2-imp-hint:has(+ #btnImpConfirm[style*="none"]){display:none}

/* Header: own slots for the live chip and Add Leads (they were stacked on top of "Team") */
@media (min-width: 721px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto auto auto auto auto auto !important;
    grid-template-areas:
      'brand userchip live assign team import endshift logout theme dashboard menu'
      'hero hero hero hero hero hero hero hero hero hero hero'
      'search search search search search search search search search search search' !important;
  }
  #v2LiveChip { grid-area: live; align-self: center; height: 38px; }
  #btnOpenImportModal { grid-area: import; }
}

/* ===================== Phone layout (telecallers work on phones; owner too) ===================== */
@media (max-width: 720px) {
  /* Telecaller header: one tidy row, nothing clipped */
  .tc-portal-header { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; height: auto !important; }
  .tc-portal-header h1 { font-size: 0.92rem !important; line-height: 1.2 !important; }
  .tc-portal-brand small { display: none !important; }
  .tc-portal-header .btn { height: 38px !important; padding: 0 10px !important; }
  .tc-portal-body { padding: 10px 10px 90px !important; }

  /* The 4 summary cards: one compact row instead of half the screen */
  .tc-summary-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; margin-bottom: 8px !important; }
  .tc-kpi-card { padding: 6px 4px !important; text-align: center !important; min-height: 0 !important; }
  .tc-kpi-card .kpi-label { font-size: 0.6rem !important; }
  .tc-kpi-card .kpi-value { font-size: 1.05rem !important; }

  /* Queue: one page scroll, no scroll-inside-scroll */
  .tc-queue-items-list { max-height: none !important; overflow: visible !important; }

  /* Big, thumb-friendly result buttons */
  .btn-tc-res-btn { min-height: 46px !important; font-size: 0.85rem !important; }
  #tcFollowupDate, #tcDurationInput, #tcCallNotes, #tcQueueSearchInput { font-size: 16px !important; min-height: 42px !important; }  /* 16px = no iOS zoom */

  /* Save bar is pinned to the bottom of the screen while a lead is open (Section 02/T10) */
  body.tc-lead-open .tc-save-actions-strip {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 30 !important;
    background: var(--bg-card, #fff) !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important; box-shadow: 0 -6px 14px rgba(15, 23, 42, .08) !important;
  }
  body.tc-lead-open .tc-portal-body { padding-bottom: 96px !important; }
  .tc-save-actions-strip .btn { height: 48px !important; font-size: 0.92rem !important; }
  #btnTcNoticeOk { min-height: 40px !important; }

  /* Owner on a phone */
  .row-check, #selectAllCheckbox { width: 20px !important; height: 20px !important; }
  .btn-res-opt { min-height: 42px !important; }
  .team-leads-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .team-leads-table-container table { min-width: 520px; }

  /* Compact owner header (Section 09): one row for brand + live chip, then a scrollable strip of icon buttons */
  .app-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "brand live" "controls controls" !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .app-header .mobile-hero-copy,
  .app-header .header-metrics { display: none !important; }
  .app-header .header-brand { grid-area: brand; height: 36px; }
  .app-header .header-brand .brand-logo { width: 28px !important; height: 28px !important; }
  .app-header .header-brand h1 { font-size: 0.9rem !important; margin: 0 !important; }
  .app-header #v2LiveChip { grid-area: live; height: 32px !important; padding: 0 10px !important; font-size: 0.7rem !important; }
  .app-header .header-controls {
    grid-area: controls;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    height: 40px !important;
  }
  .app-header .header-controls > * { flex: 0 0 auto !important; }
  .app-header .header-controls .btn,
  .app-header .header-controls .header-user-chip { height: 36px !important; padding: 0 10px !important; white-space: nowrap !important; }
  .app-header .header-controls .btn span { font-size: 0.66rem !important; }
  .app-header .global-search-wrap { min-width: 150px; }
}