/* MODAL */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--card);
    width: min(1344px, 96vw);
    height: min(88vh, 900px);
    padding: 16px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    margin: auto;

    display: flex;
    flex-direction: column;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16px;
    flex-shrink: 0;
}

.modal-content input,
.modal-content textarea,
.modal-content select {
    width: 100%;
    padding: 4px;
    margin-top: 2px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    box-sizing: border-box;
}

.close {
    position:absolute;
    right:20px;
    top:15px;
    font-size:22px;
    cursor:pointer;
}

body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background: linear-gradient(135deg,var(--bg1),var(--bg2));
    color: var(--text);
    transition: 0.3s ease;
    height: 100vh;
    overflow: hidden;
}

.container {
    width: min(1600px, 95vw);
    margin: 0 auto;
    background: var(--card);
    border-radius: 0;
    padding: 8px 14px 0 14px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-scroll-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll-wrapper table {
    width:100%;
}

.table-scroll-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card);
    opacity: 1;
}

/* Header */
.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 6px;
    flex-shrink: 0;
    min-height: 44px;
}

.header h1 {
    grid-column: 2;
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
    text-align: center;
}

.header-right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logout-btn {
    background: var(--accent);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    transition: opacity 0.2s;
}

.logout-btn:hover {
    opacity: 0.8;
}

.logged-user {
    font-size:13px;
    opacity:0.75;
    white-space: nowrap;
}

/* KPI */
.topbar {
    display: flex;
    justify-content: space-between; /* important */
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.kpis {
    display: flex;
    gap: 12px;
    margin-left: auto; /* pushes them right */
}

.kpi {
    background: rgba(92,95,224,0.15);
    padding: 8px 14px;
    border-radius: 12px;
    min-width: 115px;
}

.kpi h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1;
}

.kpi p {
    margin: 4px 0 0;
    font-size: 11px;
    opacity: 0.75;
}

.toggle {
    cursor: pointer;
    background: var(--accent);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    display: inline-block;
}

/* Legend */
.legend {
    font-size: 13px;
    margin-bottom: 8px;
    opacity: 0.85;
    flex-shrink: 0;
}

.legend-item{
    cursor:pointer;
    padding:4px 10px;
    border-radius:10px;
    display:inline-block;
}
.legend-item:hover{
    background:rgba(92,95,224,0.18);
}
.legend-item.active {
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 4px 8px;
    font-weight: 700;
}

.search {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.search input {
    padding: 8px 12px;
    border-radius: 8px;
    width: 250px;
    border: 1px solid var(--border-color);
}

.search .action-btn {
    font-size: 13px;
    padding: 6px 14px;
}

.search .nav-links a {
    margin-right: 0;
}

.search .logged-user {
    font-size:14px;
    opacity:0.75;
    white-space: nowrap;
}

table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

table th,
table td {
    text-align: center;
}

.table-wrapper thead th {
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 2;
}

#closerTable th:last-child,
#closerTable td:last-child {
    width: 170px;
    text-align: center;
}

.search-bar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.search-bar input{
    padding:8px 14px;
    border-radius:8px;
    width:250px;
    border: 1px solid var(--border-color);
}


th, td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

th {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.6;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

tbody tr:hover {
    background:rgba(92,95,224,0.08);
}

.overdue {
    background:rgba(231,76,60,0.08);
}

.priority {
    font-weight:bold;
    font-size:14px;
}

/* Lead compact */
.name-age {
    font-weight:600;
}
.phone a {
    font-size:13px;
    font-weight:600;
    color:#4ade80;
    text-decoration:none;
    letter-spacing:0.3px;
}

.phone a:hover {
    text-decoration:underline;
    color:#86efac;
}

/* Buttons */
.action-btn {
    background:var(--accent);
    border:none;
    padding:6px 14px;
    border-radius:8px;
    color:#fff;
    cursor:pointer;
}

.whatsapp-btn {
    background:#25D366;
    border:none;
    padding:6px 10px;
    border-radius:6px;
    color:white;
    cursor:pointer;
    font-size:12px;
}

.fu-date-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #ca8a04;
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #25D366;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.whatsapp-link:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.small {
    font-size:12px;
    opacity:0.85;
}

.notes {
    font-size:12px;
    opacity:0.75;
}

/* Status badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.page-size{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    opacity:0.9;
}

.page-size select{
    border:none;
    border-radius:10px;
    padding:8px 10px;
    background:rgba(255,255,255,0.08);
    color:var(--text);
    cursor:pointer;
}

body.light .page-size select{
    background:#f4f6fb;
    color:var(--text);
}

/* Lead Pool badges */
.available { background:#28a745; }
.locked { background:#dc3545; }

/* Lead Pool row coloring */
.available-row { background:rgba(0,255,0,0.05); }
.locked-row { background:rgba(255,0,0,0.08); }

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 6px 0;
    margin-top: 5px;
    background: var(--card);
}

.pagination button{
    background:#3b3d63;
    border:none;
    color:white;
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer;
    font-size:13px;
    min-width:40px;
}

.pagination button:hover,
.pagination button.active{
    background:var(--accent);
}

.pagination button:disabled{
    opacity:0.45;
    cursor:not-allowed;
}

.delete-btn{
    background:#dc3545;
    border:none;
    padding:8px 14px;
    border-radius:10px;
    color:white;
    cursor:pointer;
    font-size:13px;
    transition:0.2s ease;
}

.delete-btn:hover{
    opacity:0.85;
}

table th input[type="checkbox"],
table td input[type="checkbox"]{
    transform:scale(1.2);
    cursor:pointer;
}

.green { background:#28a745; }
.yellow { background:#ffc107; color:#222; }
.blue { background:#007bff; }
.black { background:#6c757d; }
.red { background:#dc3545; }

    .sortable{
      cursor:pointer;
      user-select:none;
    }
    .sortable span{
      font-size:11px;
      margin-left:4px;
      opacity:0.6;
    }
    .page-btn.active{
      font-weight:bold;
      background:#ddd;
    }

/* Dark mode row separators */
tbody tr td {
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* Light mode row separators (dark grey so visible) */
body.light tbody tr td {
  border-bottom:1px solid #d0d3dc;
}

/* Light mode header separator */
body.light th {
    border-bottom: 1px solid #c5c9d6;
}

thead th{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
}

/* Optional: keep the checkbox header cell aligned too */
thead th input{
  position: relative;
  z-index: 6;
}

/* Sticky headers work reliably with separate + spacing 0 */
.table-wrapper table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Make header cells sticky and fully opaque */
.table-wrapper thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: var(--card) !important;
  opacity: 1 !important;              /* critical: no transparency */
}

/* Keep the “faded header text” look without making the header itself transparent */
.table-wrapper thead th *{
  opacity: 0.6;
}

/* Optional: adds a clean separation line while scrolling */
.table-wrapper thead th{
  box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}
body.light .table-wrapper thead th{
  box-shadow: 0 1px 0 #c5c9d6;
}

/* Pagination */

.pg-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin-top:16px;
}

.pg-group{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(6px);
}

body.light .pg-group{
    background: rgba(0,0,0,.04);
}

.pg-btn{
    border:0;
    cursor:pointer;
    padding:10px 14px;
    border-radius:12px;
    background: rgba(255,255,255,.08);
    color: inherit;
    font-weight:600;
    min-width:44px;
    transition: opacity .15s ease, transform .05s ease;
}

.pg-btn:hover{
    opacity:.9;
}

.pg-btn:active{
    transform: scale(.98);
}

.pg-nav{
    min-width:64px;
}

.pg-active{
    background: rgba(92,95,224,.9);
    color:#fff;
}

body.light .pg-active{
    background: rgba(75,108,255,.92);
    color:#fff;
}

.pg-disabled{
    opacity:.4;
    cursor:not-allowed;
}

:root{
    --border-color: rgba(255, 255, 255, 0.14);
    --bg1:#1e1e2f;
    --bg2:#2b2b45;
    --card:#2f314d;
    --accent:#5c5fe0;
    --text:#ffffff
}
body.light{
    --border-color: rgba(20, 24, 40, 0.24);
    --bg1:#f4f6fb;
    --bg2:#e9ecf5;
    --card:#ffffff;
    --accent:#4b6cff;
    --text:#1e1e2f
}

tbody tr:hover{background:rgba(92,95,224,.08)}
tbody tr td{border-bottom:1px solid rgba(255,255,255,.08)}
body.light tbody tr td{border-bottom:1px solid #d0d3dc}
.delete-btn,.page-btn,.action-btn{
    background:var(--accent);
    color:#fff;
    border:none;
    padding:6px 14px;
    border-radius:8px;
    cursor:pointer
}
.page-btn.active{font-weight:bold;opacity:.9}

/* ── Notes tabs ──────────────────────────────────────────────── */
.notes-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
}
.notes-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #718096;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.notes-tab-btn:hover { color: #a0aec0; }
.notes-tab-btn.active {
    color: #fff;
    border-bottom-color: var(--accent);
}
body.light .notes-tab-btn { color: #4a5568; }
body.light .notes-tab-btn.active { color: #1a202c; }

/* ── Recording button & link ─────────────────────────────────── */
.rec-btn {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(229,62,62,0.35);
    transition: transform 0.1s, box-shadow 0.1s;
}
.rec-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(229,62,62,0.5); }
.rec-btn-sm {
    background: rgba(229,62,62,0.15);
    color: #fc8181;
    border: 1px solid rgba(229,62,62,0.4);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
}
.rec-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #68d391;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid rgba(104,211,145,0.4);
    border-radius: 8px;
    padding: 5px 10px;
    white-space: nowrap;
    transition: background 0.15s;
}
.rec-link:hover { background: rgba(104,211,145,0.12); }
.rec-code {
    font-size: 11px;
    color: #fc8181;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* ── Audio Player Modal ───────────────────────────────────────────── */
#audioPlayerModal .modal-content.ap-modal {
    max-width: 460px;
    min-height: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.ap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ap-title {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ap-close-btn {
    background: none;
    border: none;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    padding: 0 2px;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.ap-close-btn:hover { opacity: 1; }

/* Seek bar */
.ap-seek-wrap { display: flex; flex-direction: column; gap: 6px; }

.ap-seek-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
    cursor: pointer;
}
body.light .ap-seek-bar { background: rgba(0,0,0,0.1); }

.ap-seek-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 6px;
    pointer-events: none;
    transition: width 0.25s linear;
}

.ap-seek-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 3px rgba(92,95,224,0.25);
}

.ap-times {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    opacity: 0.55;
}

/* Controls row */
.ap-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ap-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    transition: opacity 0.15s;
}
.ap-btn:hover { opacity: 0.8; }

.ap-volume {
    flex: 1;
    min-width: 60px;
    max-width: 100px;
    accent-color: var(--accent);
    cursor: pointer;
}

.ap-speed {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    margin-left: auto;
}
body.light .ap-speed { background: #f4f6fb; }

#apAudio { display: none; }

.pagination-left{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}
.pagination-right{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    white-space:nowrap
}
.goto-input{
    width:58px;
    padding:6px 10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.18);
    background:transparent;
    color:var(--text);
    outline:none
}
body.light .goto-input{border:1px solid #c5c9d6}

.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #2e7d32;
    color: white;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.error {
    background: #c62828;
}

.nav-links a {
    text-decoration: none;
    background: var(--accent);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-right: 10px;
    transition: opacity 0.2s;
}

.nav-links a:hover {
    opacity: 0.8;
}

.modal-section {
    padding: 6px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.modal-section h3 {
    margin: 0 0 4px 0;
    font-size: 13px;
    opacity: 0.9;
    flex-shrink: 0;
}

.modal-section textarea {
    width: 100%;
    min-height: 70px;
    max-height: 70px;
    resize: none;
}

.med-vitals-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.med-vital {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.med-vital label {
    font-size: 11px;
    opacity: 0.75;
}

.med-vital input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 12px;
}

.med-questions {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

.med-question-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0 6px 0;
}

.med-answer {
    width: 100%;
    resize: none;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    background: rgba(0,0,0,0.15);
    color: var(--text);
    box-sizing: border-box;
    min-height: 72px;
    max-height: 120px;
    overflow-y: auto;
}

#m_personal_notes{
    flex: 1;
    min-height: 0;
    max-height: none;
    resize: none;
}

#m_closer {
    margin-top: 6px;
}

.closer-calendly-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.closer-calendly-row .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.modal-bottom-split {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-shrink: 0;
}

.modal-bottom-split .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.modal-section--notes textarea {
    width: 100%;
    min-height: 100px;
    max-height: 100px;
    resize: none;
}

.schedule-block{
    margin-top: 6px;
    border: 1px solid var(--border-color);
}

.schedule-row{
    display:flex;
    gap: 32px;
    align-items:flex-start;
    flex-wrap:wrap;
}

.schedule-row .field{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:160px;
}

.schedule-row input,
.schedule-row select{
    height: 38px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.15);
    color: var(--text);
    outline:none;
}

.schedule-row button{
    height:38px;
}

body.light .schedule-row input,
body.light .schedule-row select{
    border: 1px solid #c5c9d6;
    background: #fff;
    color: #1e1e2f;
}

body.light .legend-item.active {
    background: rgba(0,0,0,0.08);
    color: var(--text);
}

body.light .filters button.active,
body.light .filters button:hover{
    background: var(--accent);
    color: white;
}

.mini-cal{
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
}

.mini-cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.mini-cal-grid{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.mini-day{
    padding: 10px;
    border-radius: 12px;
    background: rgba(0,0,0,0.18);
}

.mini-day-title{
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 8px;
}

.slot{
    width:100%;
    border:none;
    border-radius: 10px;
    padding: 8px 10px;
    cursor:pointer;
    background: rgba(255,255,255,0.08);
    color: var(--text);
    margin-bottom: 6px;
    text-align:left;
}

.slot:hover{
    opacity: 0.9;
}

.slot.selected{
    outline: 2px solid var(--accent);
}

.slot.disabled{
    opacity: 0.35;
    cursor:not-allowed;
}

.container-wide{
    width: 1600px;
    max-width: 96vw;
}

.table-wrapper {
    width: 100%;
    max-height: 72vh;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Filters */
.filters {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.filters button{
    background: #3b3d63;
    border: none;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.filters .toggle {
    cursor:pointer;
    background:var(--accent);
    padding:8px 14px;
    border-radius:10px;
    font-size:13px;
    display:inline-block
}

.filters button.active,
.filters button:hover{
    background: var(--accent);
    color: white;
    font-weight: 600;
}

.legend-dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:10px;
    margin-right:6px;
}

.green{ background:#28a745; }
.yellow{ background:#ffc107; color:#222; }
.blue{ background:#007bff; }
.black{ background:#6c757d; }
.red{ background:#dc3545; }
.purple{ background:#7c3aed; }
.white{ background:#fff; }

.money{
    font-weight: 600;
    color: #a5d6a5;
}

.result-select{
    border-radius:8px;
    padding:4px 6px;
    border:1px solid rgba(255,255,255,0.18);
    background:var(--card);
    color:var(--text);
    cursor:pointer;
}

.result-select option:nth-child(odd) {
    background-color: rgba(255,255,255,0.05);
}

.result-select option:nth-child(even) {
    background-color: rgba(255,255,255,0.02);
}

.result-select option {
    padding: 6px 8px;
}

@media (max-width: 1100px) {
    .modal-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 96vw;
        height: 92vh;
    }
}

.notes-picker-modal {
    max-width: 720px;
}

.notes-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.notes-preview-card {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    background: rgba(255,255,255,0.04);
}

.notes-preview-card:hover {
    transform: translateY(-2px);
    opacity: 0.95;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.notes-preview-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.notes-preview-card p {
    margin: 0;
    opacity: 0.85;
    line-height: 1.4;
}

.calendar-filter-btn {
    border: none;
    background: var(--card);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
}

.date-range-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    flex-wrap: wrap;
}


.call-btn {
    font-size: 14px;
    padding: 8px 14px;
}

.call-block input {
    background: var(--card);
}

.legend-item {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.legend-item:hover {
    opacity: 0.85;
}

.large-call-btn {
    font-size: 16px;
    padding: 14px 26px;
    border-radius: 10px;
}

.call-block {
    margin-top: 20px;
}

.kpi-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.kpi-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.kpi-table td:first-child {
    font-weight: 500;
    opacity: 0.8;
}

.kpi-table td:last-child {
    text-align: right;
    font-size: 16px;
}

.kpi-table tr:hover {
    background: rgba(0,0,0,0.03);
}

.danger-btn {
    background: #444;
}

.danger-btn:hover {
    background: #c0392b;
}

.called-row {
    background: rgba(255, 230, 120, 0.28);
}

.called-row:hover {
    background: rgba(255, 230, 120, 0.4);
}

/* ── Legend separator ──────────────────────────────────────────── */
.legend-sep {
    opacity: 0.4;
    font-size: 12px;
    user-select: none;
}

/* ── KPI filter row ────────────────────────────────────────────── */
.kpi-filter-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.kpi-filter-row input[type="date"] {
    flex: 1;
    min-width: 120px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
}

/* ── notesTabModal: match caller leadModal layout ───────────────── */
#notesTabModal .modal-content {
    width: min(1344px, 96vw);
    height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#notesTabModal #nt_callerContent,
#notesTabModal #nt_closerContent {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#notesTabModal #nt_callerContent .modal-grid,
#notesTabModal #nt_closerContent .modal-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#notesTabModal .modal-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* keep bottom controls fixed */
#notesTabModal .schedule-block,
#notesTabModal #nt_callerContent .modal-section--notes > div:last-child {
    flex-shrink: 0;
}

/* ================================================================
   MOBILE STYLES  (≤ 768px)
   ================================================================ */
@media (max-width: 768px) {

    /* ── BODY / CONTAINER ──────────────────────────────────────── */
    html {
        overflow-x: hidden !important;
    }

    body {
        height: auto !important;
        min-height: 100vh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .container,
    .container-wide {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        padding: 10px 10px 16px 10px;
        border-radius: 0;
    }

    /* ── HEADER ────────────────────────────────────────────────── */
    .header {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 8px;
        padding-bottom: 8px;
        min-height: auto;
    }

    .header h1 {
        font-size: 18px;
        width: 100%;
        text-align: center;
        grid-column: unset;
    }

    .header-right {
        grid-column: unset;
        justify-self: unset;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
    }

    .logged-user {
        font-size: 12px;
    }

    /* ── TOPBAR / KPIs ─────────────────────────────────────────── */
    .topbar {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 6px;
    }

    .kpis {
        width: 100%;
        margin-left: 0;
        gap: 6px;
        justify-content: stretch;
    }

    .kpi {
        flex: 1;
        min-width: 0;
        padding: 6px 8px;
        text-align: center;
    }

    .kpi h3 { font-size: 16px; }
    .kpi p  { font-size: 10px; }

    .top-actions {
        justify-content: flex-end;
    }

    .toggle {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* ── FILTERS ───────────────────────────────────────────────── */
    .filters {
        gap: 5px;
        flex-wrap: wrap;
    }

    .filters button {
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 6px;
    }

    .date-range-filter {
        flex-wrap: wrap;
        gap: 6px;
        margin-left: 0;
        width: 100%;
    }

    .date-range-filter input[type="date"] {
        flex: 1;
        min-width: 120px;
        padding: 6px 8px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background: var(--card);
        color: var(--text);
        font-size: 13px;
    }

    .calendar-filter-btn {
        font-size: 18px;
        padding: 6px 10px;
    }

    /* ── LEGEND ────────────────────────────────────────────────── */
    .legend {
        font-size: 11px;
        line-height: 2.2;
        flex-wrap: wrap !important;
        gap: 0;
        margin-bottom: 6px;
    }

    .legend-item {
        padding: 2px 5px;
    }

    .legend-sep {
        display: none;
    }

    /* ── SEARCH ────────────────────────────────────────────────── */
    .search {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 8px;
    }

    .search input {
        width: 100%;
        box-sizing: border-box;
        order: 1;
    }

    .search .page-size {
        order: 2;
        font-size: 12px;
    }

    /* Remove absolute centering of nav-links inside search */
    .search .nav-links {
        position: static !important;
        transform: none !important;
        width: 100%;
        order: 3;
        text-align: center;
    }

    .search .nav-links a {
        display: inline-block;
        margin-right: 0;
        font-size: 14px;
        padding: 8px 16px;
    }

    /* ── SEARCH BAR (Lead Pool) ────────────────────────────────── */
    .search-bar {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
    }

    .search-bar input {
        width: 100%;
        order: 3;
        box-sizing: border-box;
    }

    .search-bar .nav-links {
        position: static !important;
        transform: none !important;
        width: 100%;
        order: 4;
        text-align: center;
    }

    .search-bar .nav-links a {
        display: inline-block;
        margin-right: 0;
        font-size: 14px;
        padding: 8px 16px;
    }

    .search-bar .page-size {
        font-size: 12px;
    }

    /* ── TABLE → CARDS ─────────────────────────────────────────── */
    .table-scroll-wrapper,
    .table-wrapper {
        flex: none !important;
        overflow: visible !important;
        max-height: none !important;
        -webkit-overflow-scrolling: auto;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    table {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    thead {
        display: none !important;
    }

    tbody {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    tbody tr {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0 0 12px 0;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        padding: 8px 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    /* Row-specific backgrounds (overdue, called, locked, available)
       still apply because their selectors have higher specificity */

    tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 0;
        border-bottom: 1px solid var(--border-color);
        border-left: none;
        border-right: none;
        border-top: none;
        text-align: left;
        min-height: 36px;
        gap: 8px;
        font-size: 13px;
        vertical-align: middle;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    tbody tr td:last-child {
        border-bottom: none;
    }

    /* Label from data-label attribute */
    tbody tr td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.55;
        min-width: 76px;
        flex-shrink: 0;
    }

    /* ── ROW NUMBER (#) — small prominent badge at top of card ─── */
    tbody tr td[data-label="#"] {
        justify-content: flex-end;
        border-bottom: 1px solid var(--border-color);
        padding: 2px 0 6px 0;
        min-height: unset;
    }

    tbody tr td[data-label="#"]::before {
        content: "# ";
        min-width: unset;
        font-size: 11px;
        font-weight: 700;
        opacity: 0.4;
    }

    tbody tr td[data-label="#"] {
        font-size: 15px;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: 0.02em;
    }

    /* Selects: give them more room */
    tbody tr td select.result-select {
        flex: 1;
        max-width: 180px;
    }

    /* Action buttons fill width */
    tbody tr td[data-label="Acțiune"] button,
    tbody tr td[data-label="Actions"] button {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* WhatsApp link bigger tap target */
    .whatsapp-link svg {
        width: 26px;
        height: 26px;
    }

    /* ── PAGINATION ─────────────────────────────────────────────── */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 10px 0 16px;
    }

    .pagination button {
        padding: 8px 10px;
        min-width: 36px;
        font-size: 12px;
    }

    .pg-wrap {
        margin-top: 12px;
    }

    .pg-group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    /* ── MODALS — bottom sheet ─────────────────────────────────── */
    .modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 94vh !important;
        border-radius: 20px 20px 0 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        padding: 20px 14px 24px !important;
        box-sizing: border-box;
    }

    /* Drag handle visual cue */
    .modal-content::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255,255,255,0.2);
        margin: 0 auto 14px;
        flex-shrink: 0;
    }

    body.light .modal-content::before {
        background: rgba(0,0,0,0.12);
    }

    .modal-grid {
        grid-template-columns: 1fr !important;
        overflow-y: visible;
    }

    .modal-section {
        min-height: auto;
        overflow: visible;
    }

    .modal-section textarea {
        min-height: 90px;
        max-height: 150px;
    }

    #m_personal_notes,
    #nt_personal_notes,
    #nt_obs {
        max-height: 140px !important;
        min-height: 80px !important;
    }

    /* Schedule rows stack vertically */
    .schedule-block {
        border: none;
        border-top: 1px solid var(--border-color);
        padding-top: 10px;
        margin-top: 10px;
    }

    .schedule-row {
        flex-direction: column;
        gap: 10px;
    }

    .schedule-row .field {
        min-width: 0;
        width: 100%;
        gap: 4px;
    }

    .schedule-row input,
    .schedule-row select {
        width: 100%;
        box-sizing: border-box;
    }

    .modal-bottom-split {
        flex-direction: column;
        gap: 10px;
    }

    /* Notes tabs scrollable */
    .notes-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .notes-tab-btn {
        white-space: nowrap;
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Notes picker single column */
    .notes-preview-grid {
        grid-template-columns: 1fr;
    }

    .notes-preview-card {
        padding: 16px;
    }

    /* Transcript modal */
    #transcriptModal .modal-content {
        max-width: 100% !important;
    }

    #transcriptBody {
        max-height: 220px;
    }

    /* Caller detail modal bottom */
    .modal-bottom-split .field {
        width: 100%;
    }

    /* Save button full-width on mobile */
    .modal-content > div[style*="justify-content:flex-end"],
    #notesTabModal #nt_closerContent > div[style*="justify-content:flex-end"] {
        justify-content: stretch !important;
    }

    .modal-content > div[style*="justify-content:flex-end"] button,
    #notesTabModal #nt_closerContent > div[style*="justify-content:flex-end"] button {
        flex: 1;
        padding: 12px;
        font-size: 15px;
    }

    /* Large call button */
    .large-call-btn {
        width: 100%;
        justify-content: center;
        font-size: 16px;
        padding: 14px 20px;
    }

    /* KPI filter row */
    .kpi-filter-row {
        flex-direction: column;
        gap: 8px;
    }

    .kpi-filter-row input[type="date"],
    .kpi-filter-row button {
        width: 100%;
    }

    /* Closer modal fields */
    .modal-section label {
        margin-top: 8px;
        font-size: 12px;
    }

    .modal-content input[type="number"],
    .modal-content input[type="date"],
    .modal-content input[type="datetime-local"],
    .modal-content input[type="time"],
    .modal-content select {
        font-size: 14px !important;
        padding: 8px !important;
    }

    /* Info table in transcript */
    #transcriptInfoTable {
        font-size: 11px;
    }
}

#notesTabModal #nt_callerContent,
#notesTabModal #nt_closerContent {
    flex: 1;
    min-height: 0;
}

#notesTabModal #nt_personal_notes,
#notesTabModal #nt_obs {
    flex: 1;
    min-height: 0;
    max-height: none;
    resize: none;
}

#notesTabModal #nt_callerContent {
    height: 100%;
}

#notesTabModal #nt_callerContent .modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: 100%;
    min-height: 0;
}

#notesTabModal #nt_callerContent .modal-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#notesTabModal #nt_typeformAnswersContainer {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

#notesTabModal #nt_typeformAnswersContainer .med-answer {
    width: 100%;
    min-height: 70px;
    max-height: 110px;
    resize: none;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    border: 1px solid var(--border-color);
    background: rgba(0,0,0,0.15);
    color: var(--text);
    box-sizing: border-box;
    overflow-y: auto;
}

#notesTabModal #nt_typeformAnswersContainer .med-question-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 4px 0;
}

#notesTabModal #nt_typeformAnswersContainer > div {
    margin-bottom: 8px !important;
}

#notesTabModal #nt_personal_notes {
    flex: 1;
    min-height: 0;
    max-height: none;
    resize: none;
}