@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Baloo+2:wght@600;700;800&display=swap');

:root {
    --bg-page: #f2f3fa;
    --bg-white: #ffffff;

    --sidebar-bg: #1a1e3f;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.06);
    --sidebar-text: #a4a6c9;
    --sidebar-text-active: #ffffff;
    --sidebar-active-bg: linear-gradient(135deg, #7c5cff 0%, #6a4dee 100%);
    --sidebar-section-label: #34d399;

    --border-color: #e9eaf3;
    --border-color-strong: #d8daea;

    --primary: #7c5cff;
    --primary-hover: #6a4dee;
    --primary-glow: rgba(124, 92, 255, 0.25);

    --purple: #7c5cff;
    --coral: #ff7a85;
    --teal: #17c3a2;
    --blue: #3fb6f0;

    --success: #17c3a2;
    --success-bg: rgba(23, 195, 162, 0.12);

    --hot-color: #ff5c72;
    --hot-bg: rgba(255, 92, 114, 0.1);
    --hot-glow: rgba(255, 92, 114, 0.3);

    --sale-color: #22c55e;
    --sale-bg: rgba(34, 197, 94, 0.12);
    --sale-glow: rgba(34, 197, 94, 0.3);

    --warm-color: #f6a723;
    --warm-bg: rgba(246, 167, 35, 0.12);
    --warm-glow: rgba(246, 167, 35, 0.3);

    --followup-color: #7c5cff;
    --followup-bg: rgba(124, 92, 255, 0.12);
    --followup-glow: rgba(124, 92, 255, 0.3);

    --text-main: #1a1d3a;
    --text-muted: #8b8da8;

    --card-shadow: 0 6px 20px rgba(31, 35, 89, 0.07);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

/* overflow-x: hidden has to be set on both html and body - mobile Safari
   treats <html> as the real scrolling viewport, so body-only was letting a
   page that's briefly wider than the screen (e.g. before a chart finishes
   laying out) pan horizontally instead of clipping. */
html {
    overflow-x: hidden;
}

body {
    background: var(--bg-page);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Layout Utilities */
.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    z-index: 0;
}

/* Faint background brand watermark image, sits behind all dashboard content */
.brand-watermark {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 32rem;
    max-width: 70%;
    transform: translate(-50%, -50%) rotate(-20deg);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

@media (max-width: 900px) {
    .brand-watermark {
        width: 18rem;
    }
}

.glass-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
    transition: all 0.2s ease;
}

.glass-card:hover {
    border-color: var(--border-color-strong);
    box-shadow: 0 10px 28px rgba(31, 35, 89, 0.1);
}

/* Headings */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.gradient-text {
    background: linear-gradient(135deg, #7c5cff 0%, #3fb6f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Forms and Inputs */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    background: #f8f9fd;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--text-main);
    transition: all 0.2s ease-in-out;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: #ffffff;
}

/* Select styling customization */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238b8da8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

select.form-control option {
    background-color: #ffffff;
    color: var(--text-main);
}

/* Toggle Switch / Radio styling (legacy, kept for compatibility) */
.status-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}

.status-option {
    position: relative;
}

.status-option input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.status-label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: #f8f9fd;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.status-option input[value="HOT"]:checked+.status-label {
    border-color: var(--hot-color);
    background: var(--hot-bg);
    color: var(--hot-color);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 14px var(--primary-glow);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-secondary {
    background: #f2f3fa;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-secondary:hover {
    background: #e9eaf3;
}

.btn-logout {
    background: rgba(255, 92, 114, 0.1);
    color: #e0324a;
    border: 1px solid rgba(255, 92, 114, 0.25);
}

.btn-logout:hover {
    background: #ff5c72;
    color: white;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pagination controls under a Sales Updates Log table (8 rows per page) -
   each Prev/page-number/Next control is styled as its own small box, sized
   and styled identically to the "All Leads" filter dropdown and "Export CSV"
   button above the table (same padding, font-size, border, radius), just
   laid out in a row with a gap - so the two rows read as one consistent set
   of controls rather than two different UI styles. */
.pagination-controls {
    display: flex;
    justify-content: flex-start;
    padding: 1rem 0 0.25rem;
}

.pagination-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-nav-btn,
.pagination-page-btn {
    background: #f2f3fa;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    min-width: 38px;
    text-align: center;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination-nav-btn:hover:not(:disabled),
.pagination-page-btn:hover:not(.active) {
    background: #e9eaf3;
}

.pagination-nav-btn:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.pagination-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination-ellipsis {
    padding: 0.5rem 0.4rem;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Header / Navbar */
.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: var(--card-shadow);
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 4px 12px var(--primary-glow);
}

.header-brand-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.header-brand-wordmark {
    width: 12rem;
    height: auto;
    display: block;
}

.header-brand-title-text {
    color: #1a1a1a;
    font-family: 'Baloo 2', 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.header-brand-subtitle-img {
    width: 12rem;
    height: auto;
    display: block;
    margin-top: 0.2rem;
}

.header-brand-subtitle-text {
    color: #1a1a1a;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 0.02rem;
}

/* KPI Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.75rem 1.85rem;
    border-radius: 8px;
    color: var(--text-main);
    overflow: hidden;
}

.stat-card-link {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
}

.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
}

.stat-icon svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 1.8;
}

.stat-info .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.stat-info .stat-label {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 0.15rem;
}

/* Colorful solid stat card variants */
.stat-card-purple {
    background: linear-gradient(135deg, #8b6bff 0%, #7c5cff 100%);
    border: none;
    color: #ffffff;
}

.stat-card-purple .stat-icon {
    color: #7c5cff;
}

.stat-card-purple .stat-value {
    color: #ffffff;
}

.stat-card-purple .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-card-coral {
    background: linear-gradient(135deg, #ff9aa2 0%, #ff7a85 100%);
    border: none;
    color: #ffffff;
}

.stat-card-coral .stat-icon {
    color: #ff7a85;
}

.stat-card-coral .stat-value {
    color: #ffffff;
}

.stat-card-coral .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-card-teal {
    background: linear-gradient(135deg, #2dd4bf 0%, #17c3a2 100%);
    border: none;
    color: #ffffff;
}

.stat-card-teal .stat-icon {
    color: #17c3a2;
}

.stat-card-teal .stat-value {
    color: #ffffff;
}

.stat-card-teal .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-card-blue {
    background: linear-gradient(135deg, #63c5f5 0%, #3fb6f0 100%);
    border: none;
    color: #ffffff;
}

.stat-card-blue .stat-icon {
    color: #3fb6f0;
}

.stat-card-blue .stat-value {
    color: #ffffff;
}

.stat-card-blue .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

/* Tables */
.table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th {
    background: #f8f9fd;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
    color: var(--text-main);
}

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

tr:hover td {
    background: #f8f9fd;
}

/* Global Sales Updates Log tables (the Overview preview and the full Sales
   Logs tab both use this). Default browser table auto-layout sizes every
   column off the WIDEST cell in that column across every row - so a single
   long client email, product name, or "IP-based location" note anywhere in
   the full log (hundreds of rows) can silently drag the whole table wider
   than the screen, even though the same markup "fits fine" on the Overview
   preview (which only ever shows the latest 10 rows, so it's much less
   likely to contain that one long value). Fixed layout + explicit column
   widths + word-break keeps both tables sized the same regardless of row
   count or content length. */
.logs-table {
    table-layout: fixed;
    width: 100%;
}

/* Tighter than the default 1.5rem side padding - with 7 columns that default
   alone eats over 300px just in whitespace, which is exactly what was
   pushing the Time column off the edge of the screen. */
.logs-table th,
.logs-table td {
    padding: 0.85rem 0.85rem;
}

.logs-table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Admin's Global Sales Updates Log tables (overviewLogsTable / salesLogsTable) -
   7 columns: Sales Agent / Client Details / Product / Status / KYC-Purchase /
   Coordinates / Time. The status badge itself doubles as the Manage Lead
   trigger (tap a non-Hot badge to change status), so there's no separate
   Actions column. */
#overviewLogsTable th:nth-child(1),
#overviewLogsTable td:nth-child(1),
#salesLogsTable th:nth-child(1),
#salesLogsTable td:nth-child(1) {
    width: 13%;
}

#overviewLogsTable th:nth-child(2),
#overviewLogsTable td:nth-child(2),
#salesLogsTable th:nth-child(2),
#salesLogsTable td:nth-child(2) {
    width: 20%;
}

#overviewLogsTable th:nth-child(3),
#overviewLogsTable td:nth-child(3),
#salesLogsTable th:nth-child(3),
#salesLogsTable td:nth-child(3) {
    width: 12%;
}

#overviewLogsTable th:nth-child(4),
#overviewLogsTable td:nth-child(4),
#salesLogsTable th:nth-child(4),
#salesLogsTable td:nth-child(4) {
    width: 15%;
}

#overviewLogsTable th:nth-child(5),
#overviewLogsTable td:nth-child(5),
#salesLogsTable th:nth-child(5),
#salesLogsTable td:nth-child(5) {
    width: 15%;
}

#overviewLogsTable th:nth-child(6),
#overviewLogsTable td:nth-child(6),
#salesLogsTable th:nth-child(6),
#salesLogsTable td:nth-child(6) {
    width: 15%;
}

#overviewLogsTable th:nth-child(7),
#overviewLogsTable td:nth-child(7),
#salesLogsTable th:nth-child(7),
#salesLogsTable td:nth-child(7) {
    width: 10%;
}

/* The sales agent's own Sales Updates Log tables (myOverviewLogsTable /
   myLogsTable) share the .logs-table row padding/word-break above, but have
   one fewer column than admin's (no "Sales Agent" column - every row is
   already their own submission), so the generic 7-column nth-child widths
   don't line up. These ID-scoped overrides give the actual 6 columns
   (Client Details / Product / Status / KYC-Purchase / Location Logged /
   Time) correct proportions while keeping row height identical to admin's.
   The status badge itself doubles as the Manage Lead trigger, so there's no
   separate Actions column. */
#myOverviewLogsTable th:nth-child(1),
#myOverviewLogsTable td:nth-child(1),
#myLogsTable th:nth-child(1),
#myLogsTable td:nth-child(1) {
    width: 23%;
}

#myOverviewLogsTable th:nth-child(2),
#myOverviewLogsTable td:nth-child(2),
#myLogsTable th:nth-child(2),
#myLogsTable td:nth-child(2) {
    width: 14%;
}

#myOverviewLogsTable th:nth-child(3),
#myOverviewLogsTable td:nth-child(3),
#myLogsTable th:nth-child(3),
#myLogsTable td:nth-child(3) {
    width: 16%;
}

#myOverviewLogsTable th:nth-child(4),
#myOverviewLogsTable td:nth-child(4),
#myLogsTable th:nth-child(4),
#myLogsTable td:nth-child(4) {
    width: 16%;
}

#myOverviewLogsTable th:nth-child(5),
#myOverviewLogsTable td:nth-child(5),
#myLogsTable th:nth-child(5),
#myLogsTable td:nth-child(5) {
    width: 19%;
}

#myOverviewLogsTable th:nth-child(6),
#myOverviewLogsTable td:nth-child(6),
#myLogsTable th:nth-child(6),
#myLogsTable td:nth-child(6) {
    width: 12%;
}

/* Telecaller's Leads Queue table (queueTable) also shares the .logs-table row
   padding/word-break, with its own 5-column layout (Sales Agent / Client
   Details / Product / Status / Time), split into equal-width columns. */
#queueTable th:nth-child(1),
#queueTable td:nth-child(1),
#queueTable th:nth-child(2),
#queueTable td:nth-child(2),
#queueTable th:nth-child(3),
#queueTable td:nth-child(3),
#queueTable th:nth-child(4),
#queueTable td:nth-child(4),
#queueTable th:nth-child(5),
#queueTable td:nth-child(5) {
    width: 20%;
}

/* Telecaller's Follow Ups matrix (followupMatrixTable) - 11 columns: Client /
   Business / Product / Day 1..Day 7 / Final Status. Styled exactly like every
   other data table in the app (.logs-table's padding/word-break, the same
   header background/row-hover/bottom-border-only look from the base
   table/th/td rules) - the ONE deliberate difference is column sizing: every
   other table uses table-layout: fixed with percentage widths, which forces
   the table to fit the container. That doesn't work here because a Day
   column needs real, unsquished room for a full call note - so this table is
   left at browser auto-layout with a min-width in px per column instead of a
   %, and once those add up past the container it overflows horizontally
   rather than truncating - .table-wrapper (already wrapping every table on
   this page) already has overflow-x: auto, so that overflow becomes a
   right-scroll. */
#followupMatrixTable th,
#followupMatrixTable td {
    padding: 0.85rem 0.85rem;
}

#followupMatrixTable td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#followupMatrixTable th:nth-child(1),
#followupMatrixTable td:nth-child(1) {
    min-width: 190px;
}

#followupMatrixTable th:nth-child(2),
#followupMatrixTable td:nth-child(2) {
    min-width: 170px;
}

#followupMatrixTable th:nth-child(3),
#followupMatrixTable td:nth-child(3) {
    min-width: 150px;
}

#followupMatrixTable th:nth-child(n+4):nth-child(-n+10),
#followupMatrixTable td:nth-child(n+4):nth-child(-n+10) {
    min-width: 220px;
}

#followupMatrixTable th:nth-child(11),
#followupMatrixTable td:nth-child(11) {
    min-width: 220px;
}

/* Admin's Follow Ups matrix (adminFollowupMatrixTable) - same table, same
   .followup-matrix-table styling, but with one extra leading Sales Agent
   column (12 columns total: Sales Agent / Client / Business / Product /
   Day 1..Day 7 / Final Status) so admin can see whose lead each row is. */
#adminFollowupMatrixTable th,
#adminFollowupMatrixTable td {
    padding: 0.85rem 0.85rem;
}

#adminFollowupMatrixTable td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#adminFollowupMatrixTable th:nth-child(1),
#adminFollowupMatrixTable td:nth-child(1) {
    min-width: 190px;
}

#adminFollowupMatrixTable th:nth-child(2),
#adminFollowupMatrixTable td:nth-child(2) {
    min-width: 190px;
}

#adminFollowupMatrixTable th:nth-child(3),
#adminFollowupMatrixTable td:nth-child(3) {
    min-width: 170px;
}

#adminFollowupMatrixTable th:nth-child(4),
#adminFollowupMatrixTable td:nth-child(4) {
    min-width: 150px;
}

#adminFollowupMatrixTable th:nth-child(n+5):nth-child(-n+11),
#adminFollowupMatrixTable td:nth-child(n+5):nth-child(-n+11) {
    min-width: 220px;
}

#adminFollowupMatrixTable th:nth-child(12),
#adminFollowupMatrixTable td:nth-child(12) {
    min-width: 220px;
}

.followup-matrix-day-cell {
    color: var(--text-main);
    vertical-align: top;
}

/* Wraps a day cell's remark text + its Edit/+Add button in a fixed top-to-
   bottom order (text first, action button directly under it) instead of
   letting them flow inline - inline flow made the button's horizontal
   position drift depending on how long that day's remark text happened to
   be, which is what looked "unordered" across rows. */
.followup-matrix-cell-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

/* margin-left: auto on .remarks-history-edit-btn only does anything inside
   a flex row (its original context, the Remarks History meta line) - reset
   it here so the button doesn't drift right after a short remark. */
.followup-matrix-cell-content .remarks-history-edit-btn {
    margin-left: 0;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-align: center;
}

.badge-hot {
    background: var(--hot-bg);
    color: var(--hot-color);
    border: 1px solid rgba(255, 92, 114, 0.25);
}

.badge-sale {
    background: var(--sale-bg);
    color: var(--sale-color);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.badge-warm {
    background: var(--warm-bg);
    color: var(--warm-color);
    border: 1px solid rgba(246, 167, 35, 0.25);
}

.badge-followup {
    background: var(--followup-bg);
    color: var(--followup-color);
    border: 1px solid rgba(124, 92, 255, 0.25);
}

/* "New since last visit" markers - telecaller Leads Queue notification.
   Small green pill next to a client's name in the table row... */
.badge-new-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    background: var(--sale-bg);
    color: var(--sale-color);
    border: 1px solid rgba(34, 197, 94, 0.25);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* ...and the "N new since your last visit" text next to the Leads Queue heading. */
.badge-new-count {
    display: inline-flex;
    align-items: center;
    margin-left: 0.65rem;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    background: var(--hot-bg);
    color: var(--hot-color);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    vertical-align: middle;
}

/* Remarks & Follow-ups table (followupsTable) - a compact summary (Sales
   Agent / Client Details / Product / Status / Time / Open) matching the
   Leads Queue table's column layout, with an Open button in place of the
   inline history + add-remark form that used to fill out every row - tapping
   Open reveals that lead's detail in a focused modal instead. */
.followups-summary-table th:nth-child(1),
.followups-summary-table td:nth-child(1) {
    width: 16%;
}

.followups-summary-table th:nth-child(2),
.followups-summary-table td:nth-child(2) {
    width: 24%;
}

.followups-summary-table th:nth-child(3),
.followups-summary-table td:nth-child(3) {
    width: 14%;
}

.followups-summary-table th:nth-child(4),
.followups-summary-table td:nth-child(4) {
    width: 17%;
}

.followups-summary-table th:nth-child(5),
.followups-summary-table td:nth-child(5) {
    width: 17%;
}

.followups-summary-table th:nth-child(6),
.followups-summary-table td:nth-child(6) {
    width: 12%;
    text-align: right;
}

/* Admin's Telecallers > Remarks & Follow-up table (adminFollowupsTable) - same
   read-only shape as the telecaller's table minus the Add Remark column (5
   columns: Sales Agent / Client Details / Status / Next Follow-up / Call
   History), since admin monitors here rather than edits. */
.admin-followups-table th:nth-child(1),
.admin-followups-table td:nth-child(1) {
    width: 15%;
}

.admin-followups-table th:nth-child(2),
.admin-followups-table td:nth-child(2) {
    width: 22%;
}

.admin-followups-table th:nth-child(3),
.admin-followups-table td:nth-child(3) {
    width: 12%;
}

.admin-followups-table th:nth-child(4),
.admin-followups-table td:nth-child(4) {
    width: 15%;
}

.admin-followups-table th:nth-child(5),
.admin-followups-table td:nth-child(5) {
    width: 36%;
}

.admin-followups-table th,
.admin-followups-table td {
    vertical-align: top;
}

.followups-summary-table th,
.followups-summary-table td {
    vertical-align: middle;
}

/* Next Follow-up date, when it's in the past - used on the Overview tab's
   Today's Callbacks widget to flag an overdue callback. */
.overdue-followup {
    color: var(--hot-color);
    font-weight: 600;
}

/* Follow-ups tab: small "Overdue Xd" tag under the status badge, so a
   telecaller can see at a glance how stale a call-back is without switching
   the filter dropdown. Amber for a recent miss, red + a subtle background
   once it's been overdue 7+ days (matches the "Overdue 7+ Days" filter). */
.overdue-days-tag {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--warm-color);
    background: rgba(245, 158, 11, 0.12);
}

.overdue-days-stale {
    color: var(--hot-color);
    background: rgba(239, 68, 68, 0.12);
}

.remarks-history-list {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.remarks-history-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}

.remarks-history-item:first-child {
    padding-top: 0;
}

.remarks-history-item:last-child {
    border-bottom: none;
}

.remarks-history-text {
    font-size: 0.85rem;
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
}

.remarks-history-meta {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.remarks-history-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
}

/* "edited" tag next to a remark's timestamp, once it's been changed via the
   Edit button below. */
.remarks-history-edited-tag {
    font-style: italic;
}

/* Author-only "Edit" button on a remark's meta row - kept compact so it
   doesn't compete visually with the timestamp it sits next to. */
.remarks-history-edit-btn {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
}

.remarks-history-edit-btn:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
}

/* Inline edit form for one remark - hidden until "Edit" is clicked. */
.remarks-history-edit-form {
    margin-top: 0.5rem;
}

.remarks-history-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.remarks-history-edit-actions .btn {
    padding: 0.3rem 0.9rem;
    font-size: 0.78rem;
}

/* Add Remark column: a compact, self-contained form matching the rest of the
   app's .form-group label-above-input pattern instead of an unlabeled
   inline row. */
.followup-inline-form .form-group {
    margin-bottom: 0.6rem;
}

.followup-inline-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.followup-inline-form .form-control {
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
}

.followup-save-btn {
    width: 100%;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
}

/* Quick Set row under the Next Follow-up date field in the Follow-up Detail
   Modal - fills the date input with today + N days without submitting. */
.followup-quick-set-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.followup-quick-set-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.followup-quick-set-btn {
    background: #f8f9fd;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.followup-quick-set-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Status badges that double as the Manage Lead trigger (WARM/FOLLOWUP/HOT -
   tap the badge itself to open the Manage Lead modal and change status). SALE
   stays a plain, non-interactive <span> badge since a Sale Lead is fully
   converted and can no longer be managed this way. */
.badge-btn {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.badge-btn:hover {
    filter: brightness(0.93);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

.badge-btn:active {
    transform: scale(0.96);
}

.badge-admin {
    background: rgba(124, 92, 255, 0.12);
    color: var(--primary);
    border: 1px solid rgba(124, 92, 255, 0.25);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid rgba(23, 195, 162, 0.25);
}

/* Leaflet Map Styling */
.map-container {
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    z-index: 1;
}

/* Login Card Specific */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(120deg, #5c3fd4 0%, #6d5ce8 35%, #2e9e4e 150%);
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #f3edfb;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h2 {
    margin-top: 1rem;
    font-size: 1.75rem;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.login-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.login-brand-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.login-logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.login-wordmark {
    width: 12rem;
    height: auto;
    display: block;
}

.login-subtitle-img {
    width: 12rem;
    height: auto;
    margin-top: 0.2rem;
    display: block;
}

.alert-error {
    background: rgba(255, 92, 114, 0.08);
    border: 1px solid rgba(255, 92, 114, 0.25);
    color: #e0324a;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Dashboards layouts */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 2rem;
    align-items: start;
}

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

.dashboard-title-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Admin Overview: standardized section spacing/headers so every card
   (Map, Lead Status, Add Company Product, Register Employee, Sales Log)
   follows the same layout rules. */
.overview-section {
    margin-top: 2rem;
}

.overview-section-header {
    margin-bottom: 1.25rem;
}

.overview-section-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.overview-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 2rem;
    align-items: stretch;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .overview-row {
        grid-template-columns: 1fr;
    }
}

.overview-row-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .overview-row-3col {
        grid-template-columns: 1fr;
    }
}

.lead-location-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.loc-source {
    font-size: 0.68rem;
    margin-top: 0.15rem;
}

.loc-source-gps {
    color: var(--success);
}

.loc-source-ip {
    color: var(--warm-color);
}

.loc-source-manual {
    color: var(--text-muted);
}

.gps-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(23, 195, 162, 0.7);
    animation: pulse 1.5s infinite;
}

.gps-pulse.inactive {
    background-color: #ff5c72;
    box-shadow: 0 0 0 0 rgba(255, 92, 114, 0.7);
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(23, 195, 162, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(23, 195, 162, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(23, 195, 162, 0);
    }
}

/* Sidebar Navigation - fixed, full viewport height, collapsible */
.sidebar {
    width: 270px;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--sidebar-bg);
    padding: 0.5rem 0.85rem 1.25rem;
    box-shadow: 4px 0 24px rgba(31, 35, 89, 0.14);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 200;
    transition: width 0.25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 0.5rem 0.85rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.sidebar-brand-text {
    font-family: 'Baloo 2', 'Outfit', sans-serif;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.sidebar-brand-wordmark {
    height: 1.75rem;
    width: auto;
    max-width: 12rem;
    object-fit: contain;
    display: block;
}

.sidebar-brand-subtitle {
    color: var(--sidebar-section-label);
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-top: 0.2rem;
}

.sidebar-brand-subtitle-img {
    height: 0.62rem;
    width: auto;
    max-width: 10.5rem;
    object-fit: contain;
    display: block;
    margin-top: 0.02rem;
}

.sidebar-brand-logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

.sidebar-section-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-section-label);
    padding: 0.55rem 0.85rem 0.3rem;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sidebar-link:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-active);
}

.sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(124, 92, 255, 0.35);
}

.sidebar-link-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}

.sidebar-link-icon svg {
    width: 1.3rem;
    height: 1.3rem;
    stroke: currentColor;
}

.sidebar-link.active .sidebar-link-icon {
    background: transparent;
}

.sidebar-link-text {
    overflow: hidden;
}

/* Unread count badge on a sidebar link (currently just "Leads Queue") -
   pushed to the far right of the link via margin-left: auto. */
.sidebar-badge-count {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--hot-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* Sidebar expandable submenu (e.g. Stock: All Stock / Sale / Balance / Add
   Stock; Telecallers: Telecallers / Remarks & Follow-up). Clicking the parent
   link expands its sublinks in place - pushing every sidebar item below it
   further down - rather than floating an overlay on top of them. A floating
   dropdown looked fine when Stock was the last item in the sidebar with
   nothing below to cover, but it visually hid Products/Stock once a submenu
   (Telecallers) higher up the list could open on top of them. */
.sidebar-group {
    position: relative;
}

.sidebar-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    transition: transform 0.2s ease;
}

.sidebar-chevron svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
}

.sidebar-link.submenu-open .sidebar-chevron {
    transform: rotate(180deg);
}

/* Subtle permanent highlight on the parent link while one of its dropdown
   options is the currently active tab - like a combo box showing a selection */
.sidebar-link.parent-active {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-active);
}

.sidebar-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 0.4rem;
    margin-top: 0;
    border-radius: 8px;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease, padding 0.25s ease;
}

.sidebar-submenu.open {
    max-height: 240px;
    opacity: 1;
    margin-top: 0.35rem;
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
}

.sidebar-sublink {
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    font-size: 0.95rem;
}

.sidebar-sublink .sidebar-link-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.sidebar-sublink .sidebar-link-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

/* Collapsed (icon-only) sidebar: the dropdown combo box doesn't make sense without labels */
body.sidebar-collapsed .sidebar-chevron,
body.sidebar-collapsed .sidebar-submenu {
    display: none;
}

/* Header Profile Menu (Profile / Change Password / Logout) */
.profile-menu {
    position: relative;
}

.profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #f8f9fd;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
}

/* Icon-only variant: just a plain transparent icon, no box, no text, no chevron.
   Muted gray by default, turns solid brand-color on hover/focus. */
.profile-trigger-icon-only {
    padding: 0.5rem;
    border-radius: 50%;
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}

.profile-trigger-icon-only:hover,
.profile-trigger-icon-only:focus-visible {
    background: var(--primary);
    color: #ffffff;
    border-color: transparent;
}

.profile-trigger-icon-only .profile-avatar {
    width: 1.3rem;
    height: 1.3rem;
    background: transparent;
    color: inherit;
}

.profile-trigger:hover {
    background: #eef0f9;
}

.profile-avatar {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-avatar svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
}

.profile-trigger-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.25;
}

.profile-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.profile-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.profile-chevron {
    display: flex;
    margin-left: 0.15rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.profile-chevron svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
}

.profile-trigger.menu-open .profile-chevron {
    transform: rotate(180deg);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 210px;
    z-index: 500;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(20, 24, 51, 0.15);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.profile-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
}

.profile-dropdown-item:hover {
    background: #f2f3fa;
}

.profile-dropdown-item svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    flex-shrink: 0;
    color: var(--text-muted);
}

.profile-dropdown-item-danger {
    color: #e0324a;
}

.profile-dropdown-item-danger svg {
    color: #e0324a;
}

.profile-dropdown-item-danger:hover {
    background: rgba(255, 92, 114, 0.1);
}

.profile-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.3rem 0.2rem;
}

.profile-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.profile-detail-row:last-child {
    border-bottom: none;
}

.profile-detail-row span {
    color: var(--text-muted);
}

.profile-detail-row strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Page wrapper offsets content by the sidebar's current width */
.page-wrapper {
    margin-left: 270px;
    min-height: 100vh;
    transition: margin-left 0.25s ease;
}

/* Collapsed state - icon-only sidebar */
body.sidebar-collapsed .sidebar {
    width: 76px;
}

body.sidebar-collapsed .page-wrapper {
    margin-left: 76px;
}

body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding: 0.25rem 0 1.25rem;
}

body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 0.65rem;
}

body.sidebar-collapsed .sidebar-section-label {
    text-align: center;
    padding: 1rem 0 0.4rem;
}

body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-brand-wordmark,
body.sidebar-collapsed .sidebar-brand-subtitle,
body.sidebar-collapsed .sidebar-brand-subtitle-img,
body.sidebar-collapsed .sidebar-link-text,
body.sidebar-collapsed .sidebar-section-text {
    display: none;
}

.menu-toggle-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-white);
    color: var(--text-main);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.menu-toggle-btn:hover {
    background: #f8f9fd;
    border-color: var(--border-color-strong);
}

.main-content {
    min-width: 0;
    padding-top: 1.5rem;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

@media (max-width: 600px) {

    /* On very small screens, an expanded sidebar would eat too much width -
       collapsing hides it completely instead of shrinking to icons */
    body.sidebar-collapsed .sidebar {
        width: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none;
    }

    body.sidebar-collapsed .page-wrapper {
        margin-left: 0;
    }

    /* .container and .glass-card both keep their full 2rem desktop padding on
       every screen size - fine on a laptop, but on a ~360-390px phone that's
       up to 128px of the width (2rem container + 2rem card, both sides) spent
       on whitespace before any real content - including the Lead Status pie
       and Top Sale Products bar chart - even starts. Trimming both down here
       gives every card, including those two charts, meaningfully more room to
       render at on a phone instead of being squeezed smaller than necessary.
       Desktop/tablet (anything above 600px) is untouched. */
    .container {
        padding: 1rem;
    }

    .glass-card {
        padding: 1.25rem;
    }

    /* .logs-table's table-layout: fixed + tight percentage widths (e.g. 10-15%
       of a 6-7 column table) works fine on desktop, but on a ~360-400px phone
       screen those percentages shrink each column to 40-60px - too narrow for
       even a short client name or status badge. overflow-wrap: anywhere then
       does the only thing it can in that little space: break every word
       letter-by-letter, and a badge with its own min-width (see .badge below)
       simply overflows its crushed cell into the row below.
       Fix: below 600px, drop table-layout: fixed for these tables entirely and
       give every column a real min-width in px instead (same technique
       already used successfully by #followupMatrixTable /
       #adminFollowupMatrixTable above) - the table becomes wider than the
       screen, and .table-wrapper's existing overflow-x: auto turns that into
       an ordinary horizontal scroll instead of forcing content into a space
       too small for it. */
    #queueTable,
    #overviewLogsTable,
    #salesLogsTable,
    #myOverviewLogsTable,
    #myLogsTable {
        table-layout: auto;
        width: auto;
    }

    #queueTable th,
    #queueTable td,
    #overviewLogsTable th,
    #overviewLogsTable td,
    #salesLogsTable th,
    #salesLogsTable td,
    #myOverviewLogsTable th,
    #myOverviewLogsTable td,
    #myLogsTable th,
    #myLogsTable td {
        width: auto;
    }

    /* Telecaller Leads Queue (queueTable) - 5 columns: Sales Agent / Client
       Details / Product / Status / Time. */
    #queueTable th:nth-child(1),
    #queueTable td:nth-child(1) {
        min-width: 140px;
    }

    #queueTable th:nth-child(2),
    #queueTable td:nth-child(2) {
        min-width: 170px;
    }

    #queueTable th:nth-child(3),
    #queueTable td:nth-child(3) {
        min-width: 120px;
    }

    #queueTable th:nth-child(4),
    #queueTable td:nth-child(4) {
        min-width: 130px;
    }

    #queueTable th:nth-child(5),
    #queueTable td:nth-child(5) {
        min-width: 110px;
    }

    /* Admin's Sales Updates Log (overviewLogsTable / salesLogsTable) - 7
       columns: Sales Agent / Client Details / Product / Status /
       KYC-Purchase / Coordinates / Time. */
    #overviewLogsTable th:nth-child(1),
    #overviewLogsTable td:nth-child(1),
    #salesLogsTable th:nth-child(1),
    #salesLogsTable td:nth-child(1) {
        min-width: 130px;
    }

    #overviewLogsTable th:nth-child(2),
    #overviewLogsTable td:nth-child(2),
    #salesLogsTable th:nth-child(2),
    #salesLogsTable td:nth-child(2) {
        min-width: 180px;
    }

    #overviewLogsTable th:nth-child(3),
    #overviewLogsTable td:nth-child(3),
    #salesLogsTable th:nth-child(3),
    #salesLogsTable td:nth-child(3) {
        min-width: 110px;
    }

    #overviewLogsTable th:nth-child(4),
    #overviewLogsTable td:nth-child(4),
    #salesLogsTable th:nth-child(4),
    #salesLogsTable td:nth-child(4) {
        min-width: 130px;
    }

    #overviewLogsTable th:nth-child(5),
    #overviewLogsTable td:nth-child(5),
    #salesLogsTable th:nth-child(5),
    #salesLogsTable td:nth-child(5) {
        min-width: 140px;
    }

    #overviewLogsTable th:nth-child(6),
    #overviewLogsTable td:nth-child(6),
    #salesLogsTable th:nth-child(6),
    #salesLogsTable td:nth-child(6) {
        min-width: 140px;
    }

    #overviewLogsTable th:nth-child(7),
    #overviewLogsTable td:nth-child(7),
    #salesLogsTable th:nth-child(7),
    #salesLogsTable td:nth-child(7) {
        min-width: 110px;
    }

    /* Sales agent's own Sales Updates Log (myOverviewLogsTable / myLogsTable)
       - 6 columns: Client Details / Product / Status / KYC-Purchase /
       Location Logged / Time. */
    #myOverviewLogsTable th:nth-child(1),
    #myOverviewLogsTable td:nth-child(1),
    #myLogsTable th:nth-child(1),
    #myLogsTable td:nth-child(1) {
        min-width: 180px;
    }

    #myOverviewLogsTable th:nth-child(2),
    #myOverviewLogsTable td:nth-child(2),
    #myLogsTable th:nth-child(2),
    #myLogsTable td:nth-child(2) {
        min-width: 120px;
    }

    #myOverviewLogsTable th:nth-child(3),
    #myOverviewLogsTable td:nth-child(3),
    #myLogsTable th:nth-child(3),
    #myLogsTable td:nth-child(3) {
        min-width: 130px;
    }

    #myOverviewLogsTable th:nth-child(4),
    #myOverviewLogsTable td:nth-child(4),
    #myLogsTable th:nth-child(4),
    #myLogsTable td:nth-child(4) {
        min-width: 130px;
    }

    #myOverviewLogsTable th:nth-child(5),
    #myOverviewLogsTable td:nth-child(5),
    #myLogsTable th:nth-child(5),
    #myLogsTable td:nth-child(5) {
        min-width: 150px;
    }

    #myOverviewLogsTable th:nth-child(6),
    #myOverviewLogsTable td:nth-child(6),
    #myLogsTable th:nth-child(6),
    #myLogsTable td:nth-child(6) {
        min-width: 110px;
    }

    /* The FOLLOW-UP/WARM LEAD status badge (.badge, min-width: 100px) and the
       Note button beneath it (already stacked via the Note button's own
       margin-top) now have a real ~110-140px-wide Status cell to sit in
       instead of a ~50px sliver, so they no longer overlap. */
    .logs-table .note-btn {
        margin-top: 0.4rem;
    }

    /* Telecaller Overview tab - "Today's Callbacks" widget (todaysCallbacksTable) -
       4 columns: Sales Agent / Client Details / Status / Next Follow-up. This
       one has no id-scoped % widths on desktop (it just inherits .logs-table's
       generic table-layout: fixed with no explicit column widths), which on a
       narrow screen still divides the table evenly into overly-tight columns -
       same fix as the other logs-tables above. */
    #todaysCallbacksTable {
        table-layout: auto;
        width: auto;
    }

    #todaysCallbacksTable th,
    #todaysCallbacksTable td {
        width: auto;
    }

    #todaysCallbacksTable th:nth-child(1),
    #todaysCallbacksTable td:nth-child(1) {
        min-width: 150px;
    }

    #todaysCallbacksTable th:nth-child(2),
    #todaysCallbacksTable td:nth-child(2) {
        min-width: 180px;
    }

    #todaysCallbacksTable th:nth-child(3),
    #todaysCallbacksTable td:nth-child(3) {
        min-width: 130px;
    }

    #todaysCallbacksTable th:nth-child(4),
    #todaysCallbacksTable td:nth-child(4) {
        min-width: 160px;
    }

    /* Telecaller Remarks tab - follow-ups summary table (followupsTable /
       .followups-summary-table) - 6 columns: Sales Agent / Client Details /
       Product / Status / Next Follow-up / Open. Has its own desktop %
       widths (16/24/14/17/17/12%) which squeeze the same way on mobile,
       including the same badge + overdue tag + Note button stack in the
       Status column as the Leads Queue table. */
    #followupsTable {
        table-layout: auto;
        width: auto;
    }

    #followupsTable th,
    #followupsTable td {
        width: auto;
    }

    #followupsTable th:nth-child(1),
    #followupsTable td:nth-child(1) {
        min-width: 140px;
    }

    #followupsTable th:nth-child(2),
    #followupsTable td:nth-child(2) {
        min-width: 170px;
    }

    #followupsTable th:nth-child(3),
    #followupsTable td:nth-child(3) {
        min-width: 110px;
    }

    #followupsTable th:nth-child(4),
    #followupsTable td:nth-child(4) {
        min-width: 140px;
    }

    #followupsTable th:nth-child(5),
    #followupsTable td:nth-child(5) {
        min-width: 140px;
    }

    #followupsTable th:nth-child(6),
    #followupsTable td:nth-child(6) {
        min-width: 100px;
        text-align: right;
    }
}

/* Quick popup styling on leaflet map */
.leaflet-popup-content-wrapper {
    background: #ffffff !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    box-shadow: var(--card-shadow) !important;
}

.leaflet-popup-tip {
    background: #ffffff !important;
}