/* Custom CSS for CRM System */
*{
    margin: 0;
    padding: 0;
}

:root {
    /* navbar / sidebar / toast z-index controls (tweak if needed) */
    --calling-panel-top: 64px; /* navbar height; keep fixed so top spacer and calling pane align */
    --sidebar-width: 300px;    /* fixed left calling pane width (tweak to match screenshot) */
    --container-max-width: 1350px; /* page container width used to align the fixed sidebar on wide screens */
    /* Stacking order (keep modals above these: Bootstrap modals typically use ~1050) */
    --sidebar-z: 1020; /* left calling pane sits above normal content but below navbar/modal */
    --navbar-z: 1030;  /* navbar above sidebar */
    --toast-z: 1040;   /* toasts (and toast container) above navbar/sidebar but below modal */
    --flash-z: 1045;   /* in-page flash alerts above all (but still below modal) */
    --primary-color: #0d6efd;
    --success-color: #198754;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #0dcaf0;
    --dark-color: #212529;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bs-gray-900);
    color: var(--bs-light);
}

/* Navigation */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    margin: 0 0.125rem;
    transition: all 0.2s ease;
}

.navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure fixed navbar stacks above the left calling pane and content */
.navbar.fixed-top {
    z-index: var(--navbar-z);
}

/* Header search (replaces big page title) */
.header-search {
    gap: 0.5rem;
    align-items: center;
}
.header-search .input-group {
    box-shadow: none;
}
.header-search .form-control.form-control-lg {
    height: calc(1.5rem + 1.5rem); /* comfortable taller input */
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}

/* Cards */
.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.card-header {
    background-color: var(--bs-gray-800);
    border-bottom: 1px solid var(--bs-gray-700);
    padding: 1px 1.25rem;
    font-weight: 600;
}

.card-body {
    padding: 0;
}

/* Statistics Cards */
.card.bg-primary,
.card.bg-success,
.card.bg-warning,
.card.bg-info {
    color: white;
}

.card.bg-primary .card-title,
.card.bg-success .card-title,
.card.bg-warning .card-title,
.card.bg-info .card-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0;
}

.card.bg-primary .card-text,
.card.bg-success .card-text,
.card.bg-warning .card-text,
.card.bg-info .card-text {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0;
}

/* Tables */
.table {
    color: var(--bs-light);
}

.table-dark {
    --bs-table-bg: var(--bs-gray-800);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255, 255, 255, 0.05);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

/* Buttons — normalized & improved */
.btn {
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.45rem 0.9rem;      /* consistent comfortable padding */
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.06s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: center;
}

/* Compact small buttons used in tables and groups */
.btn-sm,
.btn-group-sm .btn {
    padding: 0.22rem 0.45rem;
    font-size: 0.80rem;
    min-height: 28px;
    border-radius: 0.375rem;
    gap: 0.35rem;
}

/* Make outline buttons visually balanced on hover/focus */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: rgba(13,110,253,0.25);
    background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: rgba(13,110,253,0.08);
    color: var(--primary-color);
    border-color: rgba(13,110,253,0.45);
    box-shadow: 0 0 0 0.12rem rgba(13,110,253,0.08);
}

/* Primary / success / warning / danger variants */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.btn-primary:hover { filter: brightness(0.95); transform: translateY(-1px); }
.btn-success { background-color: var(--success-color); border-color: var(--success-color); color: #fff; }
.btn-warning { background-color: var(--warning-color); border-color: var(--warning-color); color: #000; }
.btn-danger  { background-color: var(--danger-color);  border-color: var(--danger-color);  color: #fff; }
.btn-info    { background-color: var(--info-color);    border-color: var(--info-color);    color: #000; }

/* Disabled / outline disabled look */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    transform: none;
    cursor: not-allowed;
    box-shadow: none;
}

/* Icon spacing inside buttons (consistent across sizes) */
.btn .fas,
.btn .far,
.btn .fa {
    margin-right: 0.45rem;
    font-size: 0.95em;
    display: inline-block;
}

/* Ensure small icon-only buttons remain square and compact */
.btn-icon {
    padding: 0.35rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tables */
.table {
    color: var(--bs-light);
}

.table-dark {
    --bs-table-bg: var(--bs-gray-800);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255, 255, 255, 0.05);
}

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.075);
}

/* Forms */
.form-control,
.form-select {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-light);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bs-gray-700);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    color: var(--bs-light);
}

.form-label {
    font-weight: 500;
    color: var(--bs-light);
}

/* Modals */
.modal-content {
    background-color: var(--bs-gray-900);
    border: 1px solid var(--bs-gray-700);
}

.modal-header {
    border-bottom-color: var(--bs-gray-700);
}

.modal-footer {
    border-top-color: var(--bs-gray-700);
}

/* Badges */
.badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

/* Progress bars */
.progress {
    height: 0.75rem;
    background-color: var(--bs-gray-700);
}

/* Alert styles */
.alert {
    border-radius: 0.5rem;
    border: none;
    /* keep normal flow but elevated so alerts aren't hidden under fixed sidebar */
    position: relative;
    z-index: var(--flash-z);
}

/* Timeline for history */
.timeline {
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* Loading spinner */
.spinner-border {
    color: var(--primary-color);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    background: var(--bs-gray-800);
}

::-webkit-scrollbar-thumb {
    background: var(--bs-gray-600);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-500);
}

.main.container.mt-4{
    margin-top: 0px !important;
}

/* Responsive adjustments */
@media (min-width: 1200px) {
    .container-xl,.container-lg,.container-md,.container-sm,.container {
        max-width: 1350px;
    }
}
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.125rem 0.25rem;
        font-size: 0.75rem;
    }
}

/* Login page specific styles */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-info));
}

/* Chart containers */
canvas {
    max-height: 300px;
}

/* Status indicators */
.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.status-indicator.active {
    background-color: var(--success-color);
}

.status-indicator.inactive {
    background-color: var(--danger-color);
}

.status-indicator.pending {
    background-color: var(--warning-color);
}

/* Contact assignment styles */
.contact-checkbox:checked + label {
    background-color: rgba(13, 110, 253, 0.1);
    border-radius: 0.25rem;
}

/* Pagination */
.pagination .page-link {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-600);
    color: var(--bs-light);
}

.pagination .page-link:hover {
    background-color: var(--bs-gray-700);
    border-color: var(--bs-gray-500);
    color: var(--bs-light);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* File input styling */
.form-control[type="file"] {
    padding: 0.375rem 0.75rem;
}

.form-control[type="file"]::-webkit-file-upload-button {
    background-color: var(--bs-gray-700);
    color: var(--bs-light);
    border: 1px solid var(--bs-gray-600);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
}

/* Phone link styling */
a[href^="tel:"] {
    text-decoration: none;
    color: var(--success-color);
}

a[href^="tel:"]:hover {
    color: var(--bs-success);
    text-decoration: underline;
}

/* Utility classes */
.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-info { color: var(--info-color) !important; }

/* Focus states */
.btn:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Print styles */
@media print {
    .navbar,
    .btn,
    .pagination {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .card {
        border: 1px solid #ddd;
        box-shadow: none;
    }
}

/* Security blocker overlay */
#security-blocker {
    position: fixed;
    inset: 0;
    background: rgba(3, 3, 3, 0.95);
    color: #fff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    font-family: inherit;
}

#security-blocker .box {
    max-width: 720px;
    width: 100%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 1.5rem;
    border-radius: 0.5rem;
}

#security-blocker h3 {
    margin-bottom: 0.5rem;
}

#security-blocker p { opacity: 0.9; margin-bottom: 0; }

/* small helper to disable user selection when needed (will not affect inputs) */
.no-select *:not(input):not(textarea):not([contenteditable="true"]) {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Calling pane and two-column layout tweaks: make left pane fixed and right panel offset */

/* Left column container (fixed sidebar) */
.contacts-split > .col-md-5 {
    display: flex;
    flex-direction: column;
	/* Fixed width sidebar (visible on larger screens) */
	flex: 0 0 var(--sidebar-width);
	max-width: var(--sidebar-width);
	min-width: var(--sidebar-width);
	padding-right: 0;
	position: static; /* default; inner pane will be fixed */
}

/* Make the calling pane fixed inside viewport (keeps it visible while right panel scrolls) */
.contacts-split > .col-md-5 .calling-pane,
.contacts-split > .col-md-5 .calling-pane .card {
	position: fixed;
	top: calc(var(--calling-panel-top) + 8px); /* slightly below navbar - aligned with spacer */
	/* left default for small/medium, overwritten on wide screens below */
	left: 12px;
	width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	height: calc(100vh - var(--calling-panel-top) - 16px);
	z-index: var(--sidebar-z); /* use centralized z-index variable */
 	display: flex;
 	flex-direction: column;
 	background: inherit;
 	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Internal scrolling for calling pane body */
.contacts-split > .col-md-5 .calling-pane .card-body {
	overflow: auto;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
	padding: 0rem;
}

/* Right column: occupy remaining space and be pushed to the right of the fixed sidebar */
.contacts-split > .col-md-7 {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	max-width: none;
	overflow: visible;
	-webkit-overflow-scrolling: auto;
	/* remove internal left padding so panels are flush */
	padding-left: 0;
	/* make right column start exactly after the sidebar (no extra gutter) */
	margin-left: calc(var(--sidebar-width));
	/* add a little top padding to align with spacer */
	padding-top: 8px;
}

/* Align fixed sidebar to the page container on wide screens (centred container)
   Use zero extra gutter so sidebar edge lines up with container inner edge and right content sits immediately next to it. */
@media (min-width: 1200px) {
    .contacts-split > .col-md-5 .calling-pane,
    .contacts-split > .col-md-5 .calling-pane .card {
        left: calc((100% - var(--container-max-width)) / 2); /* align to container inner edge */
    }
    .contacts-split > .col-md-7 {
        margin-left: 5px; /* directly adjacent to the fixed sidebar */
    }
}

/* Slight tweak: keep small offsets for medium screens but still tightly adjacent */
@media (min-width: 768px) and (max-width: 1199px) {
    .contacts-split > .col-md-5 .calling-pane { left: 12px; }
    .contacts-split > .col-md-7 { margin-left: calc(var(--sidebar-width)); }
}

/* Ensure behavior stays usable on smaller screens: revert to stacked layout and no fixed positioning */
@media (max-width: 991px) {
	.contacts-split {
		flex-direction: column;
	}
	.contacts-split > .col-md-5,
	.contacts-split > .col-md-7 {
		max-height: none;
		overflow: visible;
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0; /* reset offset */
	}
	.contacts-split > .col-md-5 .calling-pane,
	.contacts-split > .col-md-5 .calling-pane .card {
		position: static;
		height: auto;
	}
	.contacts-split > .col-md-5 .calling-pane .card-body {
		overflow: visible;
	}
	.contacts-split > .col-md-7 .card .card-header {
		position: static;
		background: inherit;
		backdrop-filter: none;
	}
}

/* Slight tweak: reduce left fixed position on very narrow desktop widths */
@media (min-width: 768px) and (max-width: 1199px) {
    .contacts-split > .col-md-5 .calling-pane { left: 8px; }
    .contacts-split > .col-md-7 { margin-left: calc(var(--sidebar-width) + 16px); }
}

/* Make table rows used for calling more visible */
#contactsTableBody tr.calling-highlight td {
    background: linear-gradient(90deg, rgba(13,110,253,0.04), transparent);
}

/* Two-column independent scrolling for contacts page */
.contacts-split {
	/* Tight two-column layout without extra gap between columns */
	display: flex;
	gap: 0; /* removed middle gap as requested */
	align-items: flex-start;
	width: 100%;
}

/* Left column: keep the calling pane visible — reduce its width so contacts area grows */
.contacts-split > .col-md-5 {
	display: flex;
	flex-direction: column;
	/* Fixed width sidebar (visible on larger screens) */
	flex: 0 0 var(--sidebar-width);
	max-width: var(--sidebar-width);
	min-width: var(--sidebar-width);
	padding-right: 0;
	position: static; /* default; inner pane will be fixed */
}

/* Make the calling pane fixed inside viewport (keeps it visible while right panel scrolls) */
.contacts-split > .col-md-5 .calling-pane,
.contacts-split > .col-md-5 .calling-pane .card {
	position: fixed;
	top: calc(var(--calling-panel-top) + 8px); /* slightly below navbar - aligned with spacer */
	/* left default for small/medium, overwritten on wide screens below */
	left: 12px;
	width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	height: calc(100vh - var(--calling-panel-top) - 16px);
	z-index: var(--sidebar-z);
 	display: flex;
 	flex-direction: column;
 	background: inherit;
 	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Internal scrolling for calling pane body */
.contacts-split > .col-md-5 .calling-pane .card-body {
	overflow: auto;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
	padding: 0rem;
}

/* Right column: occupy remaining space and be the primary content area (wider now) */
.contacts-split > .col-md-7 {
	display: flex;
	flex-direction: column;
	/* Make right column flexible so it expands when left is reduced */
	flex: 1 1 auto;
	max-width: none;
	/* Page scroll controls the whole page (no internal column scrollbar) */
	max-height: none;
	overflow: visible;
	-webkit-overflow-scrolling: auto;
	padding-left: 0; /* remove extra inner padding so panels appear flush */
}

/* Ensure cards inside right column flow normally; disable sticky headers to avoid viewport overlap */
.contacts-split > .col-md-7 .card {
	display: block;
	margin-bottom: 1rem;
}
.contacts-split > .col-md-7 .card .card-header {
	position: static; /* do not stick to viewport */
	top: auto;
	z-index: auto;
	background: inherit;
	backdrop-filter: none;
}

/* Medium+ view: keep reduced left width and flexible right column */
@media (min-width: 768px) {
	.contacts-split > .col-md-5 {
	    flex-basis: 264px;
        max-width: 350px;
	}
	.contacts-split > .col-md-7 {
		flex-basis: auto;
	}
}

/* Small screens: stacked layout, natural scrolling and remove sticky behavior */
@media (max-width: 991px) {
	.contacts-split {
		flex-direction: column;
	}
	.contacts-split > .col-md-5,
	.contacts-split > .col-md-7 {
		max-height: none;
		overflow: visible;
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.contacts-split > .col-md-5 .calling-pane,
	.contacts-split > .col-md-5 .calling-pane .card {
		position: static;
		height: auto;
	}
	.contacts-split > .col-md-5 .calling-pane .card-body {
		overflow: visible;
	}
	.contacts-split > .col-md-7 .card .card-header {
		position: static;
		background: inherit;
		backdrop-filter: none;
	}
}

/* Make flash alerts visible above the left pane */
.alert {
    /* keep normal flow but elevated so alerts aren't hidden under fixed sidebar */
    position: relative;
    z-index: var(--flash-z);
}

/* Toast container controlled by CSS var so JS can defer to CSS policy */
#toast-container {
    z-index: var(--toast-z);
}

/* Ensure toast elements accept pointer events (so close button works) */
#toast-container .toast {
    pointer-events: auto;
}

/* Make the contacts page search input fit neatly in the header */
.contacts-split .search-container {
    max-width: 420px;      /* limit width so it doesn't overflow the header */
    margin-left: auto;     /* push it to the right */
    width: 100%;
    display: block;
}
.contacts-split .search-container .form-control {
    width: 100%;
    min-width: 160px;
}

/* On smaller screens allow full width and natural stacking */
@media (max-width: 992px) {
    .contacts-split .search-container {
        max-width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

/* NEW: Compact "Google Sheets"-like styling for the contacts table */
#contactsTable {
    border-collapse: collapse;      /* remove gaps between cells */
    border-spacing: 0;
    font-size: 12px;                /* smaller font */
    line-height: 1.15;              /* tighter rows */
    background: transparent;        /* keep dark theme background */
}

/* Header: slightly more padding to avoid label wrapping and improve readability */
#contactsTable thead th {
    padding: 6px 8px;               /* small padding for readability */
    height: 36px;
    vertical-align: middle;
    font-weight: 600;
    text-transform: none;
    color: var(--bs-light);
    background: rgba(255,255,255,0.02); /* very subtle header tint */
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
    text-align: left;
}

/* Cells: small padding to make cells readable but keep compact rows */
#contactsTable tbody td {
    padding: 0px 4px;
    height: 0px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,0.04); /* light row separators */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Make phone / small meta lines less tall to keep rows compact */
#contactsTable tbody td .small,
#contactsTable tbody td small {
    font-size: 11px;
    line-height: 1;
    display: block;
    margin-top: 2px;
}

/* Remove cell corner radius when using .card surrounding table */
#contactsTable,
#contactsTable th,
#contactsTable td {
    border-radius: 0 !important;
}

/* Row hover: subtle highlight */
#contactsTable tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

/* Action buttons: reduce size so they fit neatly in compact rows */
#contactsTable .btn-group-sm .btn,
#contactsTable .btn-group .btn {
    padding: 0.2rem 0.35rem;
    font-size: 11px;
    line-height: 1;
}

/* Ensure table responsive container doesn't add extra padding */
.table-responsive > #contactsTable {
    margin: 0;
}

/* Small helper: compress the badge inside compact table */
#contactsTable .badge {
    padding: 0.25rem 0.4rem;
    font-size: 11px;
}

/* Optional: if you prefer absolutely zero vertical spacing, uncomment these (strict) */
/*
#contactsTable thead th,
#contactsTable tbody td {
    height: auto;
    line-height: 1;
}
*/

/* NEW: Last Remark column: enforce a wider fixed width so remark cell appears larger (now 6th column) */
#contactsTable thead th:nth-child(6),
#contactsTable tbody td:nth-child(6) {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    vertical-align: top; /* keep remark text aligned neatly */
    overflow: hidden;
}

/* Last remark element: match column width and allow multi-line clamp */
.last-remark {
    max-width: 220px;               /* match column width */
    display: -webkit-box;
    -webkit-line-clamp: 4;          /* show up to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
}

#contactsTable .contact-count {
    display: inline-block;
    min-width: 20px;
    text-align: right;
    margin-right: 8px;
    color: rgba(255,255,255,0.8);
}

/* Last Remark truncation: limit width and visually clamp to 4 lines, show ellipsis */
.last-remark {
    max-width: 220px;               /* reduced from 320px to 220px as requested */
    display: -webkit-box;           
    -webkit-line-clamp: 4;          /* show up to 4 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;            /* allow wrapping */
    word-wrap: break-word;
}

/* Make it a bit smaller text and preserve spacing in the compact table */
#contactsTable .last-remark {
    font-size: 11px;
    line-height: 1.2;
}

/* Slightly narrower on small screens */
@media (max-width: 767px) {
    .last-remark { max-width: 140px; -webkit-line-clamp: 3; }
}

/* Ensure header search is responsive */
@media (max-width: 992px) {
    .header-search .input-group { max-width: 100%; }
    .header-search .form-control.form-control-lg { font-size: 0.95rem; height: 42px; }
}

/* remove extra left margin when used in the header */
.d-flex.justify-content-between .ms-3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile-first improvements: better stacking, touch sizes and full-width modals/offcanvas */
@media (max-width: 767px) {
    /* Make navbar spacer slightly smaller on phones */
    :root {
        --calling-panel-top: 56px;
    }

    /* Stack columns vertically and ensure full width */
    .contacts-split {
        flex-direction: column;
        gap: 0;
    }
    .contacts-split > .col-md-5,
    .contacts-split > .col-md-7 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Calling pane becomes normal flow block (not fixed), full width and visually distinct */
    .contacts-split > .col-md-5 .calling-pane,
    .contacts-split > .col-md-5 .calling-pane .card {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        z-index: var(--sidebar-z);
        box-shadow: none !important;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
    }
    .contacts-split > .col-md-5 .calling-pane .card-body {
        padding: 0.85rem;
    }

    /* Right panel should be full width below the calling pane */
    .contacts-split > .col-md-7 {
        margin-left: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem;
    }

    /* Increase tappable areas */
    .btn, .btn-sm, .btn-group-sm .btn {
        min-height: 44px;
        padding: 0.6rem 0.9rem;
        font-size: 1rem;
        border-radius: 0.5rem;
    }

    .form-control, .form-select {
        font-size: 1rem;
        padding: 0.55rem 0.6rem;
    }

    textarea.form-control {
        min-height: 88px;
    }

    /* Make header search stack and fit nicely */
    .header-search {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    .header-search .input-group { width: 100%; max-width: 100%; }
    .header-search .form-control.form-control-lg { height: 44px; font-size: 1rem; }

    /* Offcanvas: full screen for comfortable mobile editing */
    .offcanvas.offcanvas-end {
        width: 100% !important;
        max-width: 100% !important;
    }
    .offcanvas .offcanvas-body { padding: 1rem; }

    /* Modals: full width dialog on small screens */
    .modal-dialog { max-width: 100% !important; margin: 0.5rem; }
    .modal-content { border-radius: 0.5rem; }

    /* Make toast container more accessible on mobile (center bottom) */
    #toast-container {
        left: 0;
        right: 0;
        bottom: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 12px;
    }
    #toast-container .toast {
        width: auto;
        max-width: 96%;
    }

    /* Tables: allow horizontal scroll and slightly larger font for readability */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    #contactsTable {
        font-size: 13px;
    }
    #contactsTable thead th, #contactsTable tbody td {
        padding: 8px 10px;
    }

    /* Compact the action buttons into a stacked layout if row is cramped */
    #contactsTable .btn-group {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    /* Deleted/Assigned lists: make rows easier to tap */
    #assignedContactsTable td, #assignedContactsTable th,
    table.table-sm td, table.table-sm th {
        padding: 10px 8px;
    }

    /* Slightly increase the calling pane font sizes for readability */
    #calling_name { font-size: 1.15rem; }
    #calling_phone, #calling_alt, #calling_email { font-size: 1rem; font-weight: 600; }

    /* Ensure no accidental horizontal scroll from small shadows/margins */
    body, html { overflow-x: hidden; }
}

/* Small phones / very narrow screens fine tuning */
@media (max-width: 420px) {
    .btn { font-size: 0.95rem; padding: 0.55rem 0.75rem; }
    .header-search .input-group .input-group-text { padding-left: 8px; padding-right: 8px; }
    #calling_name { font-size: 1.05rem; }
    textarea.form-control { min-height: 72px; }
}

/* Also apply fixed width / clamp for "Last Remark" column in Assigned and Deleted (agent) views */
#assignedContactsTable thead th:nth-child(9),
#assignedContactsTable tbody td:nth-child(9),
#deletedContactsTable thead th:nth-child(9),
#deletedContactsTable tbody td:nth-child(9) {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    vertical-align: top;
    overflow: hidden;
}

/* Ensure .last-remark inside assigned/deleted tables follows same clamp/size */
#assignedContactsTable .last-remark,
#deletedContactsTable .last-remark {
    max-width: 220px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
}

/* Ensure any table cell that contains a .last-remark uses a fixed 220px column width
   This covers #contactsTable plus assigned / deleted / other tables where .last-remark appears */
table td > .last-remark,
table th > .last-remark,
#contactsTable thead th:nth-child(6),
#contactsTable tbody td:nth-child(6),
#assignedContactsTable thead th:nth-child(9),
#assignedContactsTable tbody td:nth-child(9),
#deletedContactsTable thead th:nth-child(9),
#deletedContactsTable tbody td:nth-child(9) {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    vertical-align: top;
    overflow: hidden;
    box-sizing: border-box;
}

/* Make the .last-remark element fill its table cell and keep the existing clamp/ellipsis */
table td > .last-remark,
table th > .last-remark,
#contactsTable .last-remark,
#assignedContactsTable .last-remark,
#deletedContactsTable .last-remark {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
    max-width: 100%;
    font-size: 11px;
    line-height: 1.2;
}

/* Fixed bottom horizontal scrollbar (overlay) */
.bottom-scrollbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 6px; /* slight gap above OS taskbar */
    height: 12px;
    z-index: calc(var(--toast-z) + 10); /* be above toasts but below modals */
    display: block;
    pointer-events: auto;
    padding: 0 12px;
    box-sizing: border-box;
}

/* track appearance */
.bottom-scrollbar {
    background: rgba(0,0,0,0.18);
    border-radius: 8px;
    display: flex;
    align-items: center;
}

/* thumb */
.bottom-scrollbar-thumb {
    height: 8px;
    min-width: 24px;
    max-width: 100%;
    background: linear-gradient(90deg, var(--primary-color), rgba(13,110,253,0.9));
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: background 0.12s ease;
    will-change: left, width;
}

/* active dragging cursor */
.bottom-scrollbar-thumb:active,
.bottom-scrollbar-thumb.dragging {
    cursor: grabbing;
    background: linear-gradient(90deg, rgba(13,110,253,0.95), rgba(13,110,253,0.8));
}

/* hide on small screens if not needed */
@media (max-width: 480px) {
    .bottom-scrollbar { bottom: 10px; padding: 0 8px; }
}

/* Ensure the TD containing .last-remark can position the copy button */
td.remark-cell {
    position: relative;
    overflow: visible; /* allow absolute button to be visible */
    padding-right: 0;  /* we will reserve space inside .last-remark itself */
}

/* Reserve space inside the remark element so the absolute button never overlaps text */
td.remark-cell .last-remark {
    display: block;            /* ensure block-level so padding applies */
    padding-right: 48px;       /* reserve room for the button (adjust to btn width + gap) */
    box-sizing: border-box;
}

/* Absolute copy button anchored to the right of the TD */
td.remark-cell .copy-remark-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.45rem;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    pointer-events: auto;
}

/* Small tweak so button looks compact inside compact table */
#contactsTable .copy-remark-btn {
    font-size: 11px;
    line-height: 1;
}

/* Responsive: reduce reserved padding and button size on small screens */
@media (max-width: 767px) {
    td.remark-cell .last-remark { padding-right: 40px; -webkit-line-clamp: 3; }
    td.remark-cell .copy-remark-btn { right: 6px; height: 30px; min-width: 30px; padding: 0.22rem 0.35rem; }
}