From fa956e3fbab68937848e7555e25afca35d949ea6 Mon Sep 17 00:00:00 2001
From: frytimo <tim@fusionpbx.com>
Date: Wed, 1 Apr 2026 14:44:24 -0300
Subject: [PATCH] Add outgoing and incoming Calls tab (#7828)

* Fix outgoing and incoming calls section.

* Use browser caching for css file with cache busting
By allowing the browser to download the css file directly, the browser will automatically cache the file. The `?v=` parameter uses an md5 hash to differentiate changes in the file.
---
 app/operator_panel/index.php                  | 689 +---------------
 .../resources/css/operator_panel.css          | 776 ++++++++++++++++++
 .../resources/javascript/operator_panel.js    | 397 +++++++--
 3 files changed, 1125 insertions(+), 737 deletions(-)
 create mode 100644 app/operator_panel/resources/css/operator_panel.css

diff --git a/app/operator_panel/index.php b/app/operator_panel/index.php
index ed26085388..de22e0d10f 100644
--- a/app/operator_panel/index.php
+++ b/app/operator_panel/index.php
@@ -145,6 +145,13 @@
 	$ws_client_hash = md5_file(__DIR__ . '/resources/javascript/websocket_client.js');
 	$lop_js_hash    = md5_file(__DIR__ . '/resources/javascript/operator_panel.js');
 
+// Cache-busting hash for CSS
+	$operator_panel_css_file = $settings->get('theme', 'operator_panel_css_file', 'operator_panel.css');
+	$operator_panel_css_file = preg_replace('/[^a-z0-9_\-\.]/i', '', $operator_panel_css_file);
+	$operator_panel_css_file = realpath(__DIR__ . "/resources/css/$operator_panel_css_file");
+	$operator_panel_css_hash = md5_file($operator_panel_css_file);
+	echo "<link rel='stylesheet' href='resources/css/" . basename($operator_panel_css_file) . "?v=$operator_panel_css_hash'>\n";
+
 ?>
 
 <script type="text/javascript">
@@ -260,688 +267,6 @@
 
 ?>
 
-<style>
-/* Active Operator Panel — extension blocks */
-.op-ext-grid {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0;
-	padding: 4px 0 12px;
-}
-/* Status buttons */
-.op-status-btn {
-	border: 2px solid transparent;
-	border-radius: 4px;
-	padding: 3px 10px;
-	font-size: 11px;
-	font-weight: 700;
-	color: #fff;
-	cursor: pointer;
-	text-transform: uppercase;
-	letter-spacing: .5px;
-	line-height: 1.4;
-	transition: opacity .15s, border-color .15s;
-	opacity: 0.55;
-}
-.op-status-btn:hover { opacity: 0.8; }
-.op-status-btn.active { opacity: 1; border-color: rgba(0,0,0,.35); }
-/* Filter bar */
-.op-filter-bar {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	padding: 6px 0 10px;
-	flex-wrap: wrap;
-}
-.op-group-filters {
-	display: inline-flex;
-	gap: 4px;
-	flex-wrap: wrap;
-}
-.op-group-filter-btn {
-	border: none;
-	border-radius: 4px;
-	padding: 3px 10px;
-	font-size: 11px;
-	font-weight: 700;
-	color: #fff;
-	cursor: pointer;
-	text-transform: uppercase;
-	letter-spacing: .3px;
-	line-height: 1.4;
-	background-color: #4a8cdb;
-	transition: opacity .15s;
-	opacity: 0.55;
-}
-.op-group-filter-btn:hover { opacity: 0.8; }
-.op-group-filter-btn.active { opacity: 1; background-color: #2a7fff; }
-.op-text-filter {
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	padding: 3px 8px;
-	font-size: 12px;
-	line-height: 1.4;
-	width: 130px;
-	outline: none;
-}
-.op-text-filter:focus { border-color: #80bdff; box-shadow: 0 0 0 2px rgba(0,123,255,.15); }
-/* Edit mode button */
-.op-edit-btn {
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	background: #fff;
-	padding: 3px 8px;
-	font-size: 14px;
-	cursor: pointer;
-	color: #6c757d;
-	line-height: 1;
-	transition: background .15s, color .15s;
-}
-.op-edit-btn:hover { background: #e9ecef; }
-.op-edit-btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
-/* Transfer mode toggle */
-.op-transfer-mode {
-	display: inline-flex;
-	align-items: center;
-	gap: 5px;
-	margin-left: auto;
-	font-size: 12px;
-	color: #555;
-	white-space: nowrap;
-}
-.op-transfer-mode-label {
-	font-weight: 600;
-	color: #444;
-}
-.op-transfer-mode-btn {
-	padding: 2px 10px;
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	background: #fff;
-	font-size: 11px;
-	font-weight: 600;
-	cursor: pointer;
-	color: #555;
-	transition: background .15s, color .15s, border-color .15s;
-}
-.op-transfer-mode-btn:hover { background: #e9ecef; }
-.op-transfer-mode-btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
-/* Context menu */
-.op-ctx-menu {
-	position: fixed;
-	z-index: 9990;
-	background: #fff;
-	border: 1px solid #d0d7de;
-	border-radius: 6px;
-	box-shadow: 0 8px 24px rgba(0,0,0,.18);
-	min-width: 165px;
-	padding: 4px 0;
-	display: none;
-	margin: 0;
-}
-.op-ctx-header {
-	font-size: 11px;
-	color: #888;
-	padding: 3px 14px 2px;
-	text-transform: uppercase;
-	letter-spacing: .5px;
-	font-weight: 600;
-	user-select: none;
-}
-.op-ctx-separator {
-	height: 1px;
-	background: #e0e0e0;
-	margin: 4px 0;
-}
-.op-ctx-item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 7px 14px;
-	font-size: 13px;
-	cursor: pointer;
-	color: #24292f;
-	white-space: nowrap;
-	border: none;
-	background: none;
-	width: 100%;
-	text-align: left;
-	line-height: 1.3;
-}
-.op-ctx-item:hover { background: #f0f6ff; }
-.op-ctx-item .op-ctx-icon { font-size: 12px; opacity: .7; flex-shrink: 0; }
-.op-ctx-danger { color: #c9242d; }
-.op-ctx-danger:hover { background: #fff1f0; }
-/* Attended transfer consultation bar */
-.op-att-bar {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 9980;
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	padding: 10px 20px;
-	background: #198754;
-	color: #fff;
-	font-size: 14px;
-	font-weight: 600;
-	box-shadow: 0 -2px 8px rgba(0,0,0,.2);
-}
-.op-att-icon { font-size: 18px; }
-.op-att-label { flex: 1; }
-.op-att-btn {
-	padding: 6px 16px;
-	border: none;
-	border-radius: 4px;
-	font-size: 13px;
-	font-weight: 600;
-	cursor: pointer;
-}
-.op-att-complete {
-	background: #fff;
-	color: #198754;
-}
-.op-att-complete:hover { background: #e9ecef; }
-.op-att-cancel {
-	background: rgba(255,255,255,.2);
-	color: #fff;
-}
-.op-att-cancel:hover { background: rgba(255,255,255,.35); }
-.op-ext-block {
-	display: flex;
-	width: 235px;
-	margin: 0 8px 8px 0;
-	border-style: solid;
-	border-width: 1px 3px;
-	border-radius: 5px;
-	border-color: #b9c5d8;
-	background-color: #e5eaf5;
-	box-shadow: 0 0 3px #c8cdd9;
-	position: relative;
-	overflow: hidden;
-	user-select: none;
-	cursor: default;
-}
-.op-ext-icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 47px;
-	width: 47px;
-	background-color: #e5eaf5;
-	border-radius: 4px 0 0 4px;
-	color: #7a8499;
-	font-size: 26px;
-	padding: 4px 0;
-}
-.op-ext-status-icon {
-	font-size: 28px;
-	line-height: 1;
-	color: inherit;
-}
-.op-ext-contact-photo {
-	width: 36px;
-	height: 36px;
-	border-radius: 50%;
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-.op-ext-info {
-	flex: 1;
-	padding: 5px 8px 5px 8px;
-	background: #fff;
-	border-radius: 0 3px 3px 0;
-	font-family: arial, sans-serif;
-	font-size: 10px;
-	min-width: 0;
-	position: relative;
-	min-height: 50px;
-}
-.op-ext-number     { font-size: 12px; font-weight: bold; color: #3164AD; line-height: 1.4; }
-.op-ext-name       { font-size: 10px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.op-ext-state-info { font-size: 10px; color: #555; margin-top: 3px; }
-.op-ext-info.op-has-live-call { padding-right: 78px; padding-bottom: 15px; box-sizing: border-box; }
-.op-ext-info.op-has-live-call .op-ext-state-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.op-ext-mine-label { position: absolute; top: 2px; right: 4px; font-size: 9px; color: #0d6efd; font-weight: 600; }
-.op-ext-dial-wrap  { position: absolute; top: 22px; right: 3px; }
-.op-ext-dial-toggle {
-	border: none;
-	background: transparent;
-	padding: 0;
-	margin: 0;
-	line-height: 0;
-	cursor: pointer;
-}
-.op-ext-dial-toggle img { display: block; }
-.op-ext-dial-input {
-	position: absolute;
-	top: -1px;
-	right: 18px;
-	width: 100px;
-	min-width: 100px;
-	max-width: 100px;
-	height: 20px;
-	padding: 1px 6px;
-	font-size: 12px;
-	border: 1px solid #b9c5d8;
-	border-radius: 2px;
-	background-color: #fff;
-	text-align: center;
-}
-.op-ext-call-meta {
-	position: absolute;
-	top: 2px;
-	right: 20px;
-	display: flex;
-	align-items: center;
-	gap: 6px;
-}
-.op-ext-call-direction {
-	width: 12px;
-	height: 12px;
-	border: none;
-}
-.op-ext-call-duration {
-	font-size: 12px;
-	color: #4a4a4a;
-	line-height: 1;
-}
-.op-ext-call-actions {
-	position: absolute;
-	bottom: 2px;
-	right: 18px;
-	display: flex;
-	align-items: center;
-	gap: 5px;
-}
-.op-ext-action-icon {
-	width: 12px;
-	height: 12px;
-	border: none;
-	cursor: pointer;
-}
-body.op-dragging, body.op-dragging * {
-	cursor: none !important;
-}
-/* user status: available — green */
-.op-ext-available               { border-color: #28a745; background-color: #d4edda; }
-.op-ext-available .op-ext-icon  { background-color: #c3e6cb; }
-.op-ext-available .op-ext-icon .op-ext-status-icon  { color: #1e7e34; }
-.op-ext-available .op-ext-info  { background-color: #eaf6ec; }
-/* user status: on break — gold */
-.op-ext-on-break               { border-color: #b8860b; background-color: #fdf3d7; }
-.op-ext-on-break .op-ext-icon  { background-color: #f5e6b8; }
-.op-ext-on-break .op-ext-icon .op-ext-status-icon  { color: #8a6508; }
-.op-ext-on-break .op-ext-info  { background-color: #fef9eb; }
-/* user status: do not disturb — red */
-.op-ext-dnd               { border-color: #dc3545; background-color: #f8d7da; }
-.op-ext-dnd .op-ext-icon  { background-color: #f1b0b7; }
-.op-ext-dnd .op-ext-icon .op-ext-status-icon  { color: #a71d2a; }
-.op-ext-dnd .op-ext-info  { background-color: #fce4e7; }
-/* registered (no explicit status / no user attached) — blue */
-.op-ext-registered               { border-color: #4a8cdb; background-color: #d6e9f8; }
-.op-ext-registered .op-ext-icon  { background-color: #c3ddf2; }
-.op-ext-registered .op-ext-icon .op-ext-status-icon  { color: #2b6cb0; }
-.op-ext-registered .op-ext-info  { background-color: #eaf3fc; }
-/* user status: logged out — grey */
-.op-ext-logged-out               { border-color: #9da5ae; background-color: #e2e3e5; }
-.op-ext-logged-out .op-ext-icon  { background-color: #d6d8db; }
-.op-ext-logged-out .op-ext-icon .op-ext-status-icon  { color: #1e7e34; }
-.op-ext-logged-out .op-ext-info  { background-color: #f0f1f2; }
-.op-ext-logged-out .op-ext-number { color: #888; }
-.op-ext-logged-out .op-ext-name  { color: #999; }
-/* unregistered — grey with muted content */
-.op-ext-unregistered               { border-color: #9da5ae; background-color: #e2e3e5; cursor: not-allowed; }
-.op-ext-unregistered .op-ext-icon  { background-color: #d6d8db; }
-.op-ext-unregistered .op-ext-icon .op-ext-status-icon  { color: #6c757d; opacity: .4; filter: grayscale(100%); }
-.op-ext-unregistered .op-ext-info  { background-color: #f0f1f2; color: #999; }
-.op-ext-unregistered .op-ext-number { color: #999; }
-.op-ext-unregistered .op-ext-name  { color: #aaa; }
-/* call state: ringing — blue */
-.op-ext-ringing               { border-color: #41b9eb; background-color: #a8dbf0; }
-.op-ext-ringing .op-ext-icon  { background-color: #a8dbf0; }
-.op-ext-ringing .op-ext-icon .op-ext-status-icon  { color: #0e6882; }
-.op-ext-ringing .op-ext-info  { background-color: #d1f1ff; }
-/* call state: active (on call) — bright green */
-.op-ext-active                { border-color: #77d779; background-color: #baf4bb; }
-.op-ext-active .op-ext-icon   { background-color: #baf4bb; }
-.op-ext-active .op-ext-icon .op-ext-status-icon   { color: #2a7a2b; }
-.op-ext-active .op-ext-info   { background-color: #e1ffe2; }
-/* call state: held — teal */
-.op-ext-held                  { border-color: #5bbfd1; background-color: #b3e5ee; }
-.op-ext-held .op-ext-icon     { background-color: #b3e5ee; }
-.op-ext-held .op-ext-icon .op-ext-status-icon     { color: #1a6c7a; }
-.op-ext-held .op-ext-info     { background-color: #ddf4f8; }
-/* mine highlight */
-.op-ext-mine       { border-width: 2px 3px !important; border-color: #0d6efd !important; }
-/* drop target */
-.op-ext-drop-over  { box-shadow: 0 0 0 3px #0d6efd; }
-.op-ext-drop-over .op-ext-info { background-color: #cfe2ff !important; }
-/* section labels */
-.op-ext-section-label { font-weight: 600; font-size: .85em; color: #6c757d; margin: 8px 0 4px; width: 100%; }
-/* My Extensions container — own line above other groups */
-#my_extensions_container:not(:empty) {
-	margin-bottom: 14px;
-	padding-bottom: 10px;
-}
-/* call group cards */
-.op-group-card {
-	border: 1px solid #d0d8e5;
-	border-radius: 5px;
-	background-color: #fff;
-	box-shadow: 0 1px 3px #d0d8e5;
-	margin-bottom: 14px;
-	overflow: hidden;
-	display: inline-flex;
-	vertical-align: top;
-	margin-right: 14px;
-}
-.op-group-card.op-hidden { display: none; }
-
-/* Card frame orientation by label position */
-.op-group-card[data-position="left"]   { flex-direction: row; }
-.op-group-card[data-position="right"]  { flex-direction: row-reverse; }
-.op-group-card[data-position="top"]    { flex-direction: column; }
-.op-group-card[data-position="bottom"] { flex-direction: column-reverse; }
-.op-group-card[data-position="hidden"] { flex-direction: row; }
-/* Edit mode: cards grid container */
-#extensions_container {
-	transition: background .2s;
-}
-#extensions_container.op-edit-mode .op-group-card {
-	cursor: grab;
-	border: 2px dashed #80bdff;
-}
-#extensions_container.op-edit-mode .op-group-card.sortable-ghost {
-	opacity: .4;
-}
-/* In edit mode, force hidden headers visible so Sortable has a drag handle */
-#extensions_container.op-edit-mode .op-group-card[data-position="hidden"] .op-group-card-header {
-	display: flex;
-	min-width: 18px;
-	padding: 4px 2px;
-	cursor: grab;
-	background: #d0d8e5;
-	writing-mode: vertical-rl;
-	text-orientation: mixed;
-	transform: rotate(180deg);
-	align-items: center;
-	justify-content: center;
-	font-size: 11px;
-	color: #888;
-}
-/* Card header - default/left side orientation with vertical text */
-.op-group-card-header {
-	background-color: #e5e9f0;
-	padding: 8px 4px;
-	font-size: 12px;
-	font-weight: 600;
-	color: #444;
-	border-right: 1px solid #d0d8e5;
-	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
-	writing-mode: vertical-rl;
-	text-orientation: mixed;
-	transform: rotate(180deg);
-	letter-spacing: .6px;
-	text-transform: uppercase;
-	white-space: nowrap;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 34px;
-}
-
-/* Top position - horizontal text, border at bottom */
-.op-group-card[data-position="top"] .op-group-card-header {
-	writing-mode: horizontal-tb;
-	transform: none;
-	border-right: none;
-	border-bottom: 1px solid #d0d8e5;
-	min-width: auto;
-	padding: 6px 12px;
-}
-
-/* Right position - vertical text, border at left */
-.op-group-card[data-position="right"] .op-group-card-header {
-	writing-mode: vertical-rl;
-	text-orientation: mixed;
-	transform: rotate(0deg);
-	border-right: none;
-	border-left: 1px solid #d0d8e5;
-	min-width: 34px;
-}
-
-/* Bottom position - horizontal text, border at top */
-.op-group-card[data-position="bottom"] .op-group-card-header {
-	writing-mode: horizontal-tb;
-	transform: none;
-	border-right: none;
-	border-top: 1px solid #d0d8e5;
-	min-width: auto;
-	padding: 6px 12px;
-}
-
-/* Hidden position - no header visible */
-.op-group-card[data-position="hidden"] .op-group-card-header {
-	display: none;
-}
-/* Tooltip on hover - show group name in title attribute */
-.op-group-card:hover {
-	cursor: help;
-}
-/* Hide text for "My Extensions" but keep grey shading */
-.op-group-card-header.op-hidden-text {
-	color: transparent;
-	text-shadow: none;
-}
-.op-group-card-body {
-	padding: 10px 8px 4px;
-	flex: 1;
-}
-
-/* Top row in Extensions tab: My Extensions + Parked */
-.op-top-row {
-	display: flex;
-	align-items: stretch;
-	gap: 14px;
-	flex-wrap: wrap;
-	margin-bottom: 14px;
-}
-#my_extensions_container,
-#parked_side_container {
-	flex: 1 1 420px;
-	min-width: 320px;
-}
-#my_extensions_container:not(:empty),
-#parked_side_container:not(:empty) {
-	margin-bottom: 0;
-	padding-bottom: 0;
-}
-
-/* Parked side panel */
-.op-parked-card {
-	border: 1px solid #d0d8e5;
-	border-radius: 5px;
-	background-color: #fff;
-	box-shadow: 0 1px 3px #d0d8e5;
-	overflow: hidden;
-	display: flex;
-	flex-direction: row;
-}
-.op-parked-header {
-	background-color: #e5e9f0;
-	padding: 8px 4px;
-	font-size: 12px;
-	font-weight: 600;
-	color: #444;
-	border-right: 1px solid #d0d8e5;
-	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
-	writing-mode: vertical-rl;
-	text-orientation: mixed;
-	transform: rotate(180deg);
-	letter-spacing: .6px;
-	text-transform: uppercase;
-	white-space: nowrap;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 34px;
-}
-.op-parked-list {
-	padding: 8px;
-	max-height: 280px;
-	overflow: auto;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-.op-parked-item {
-	width: 235px;
-	min-height: 50px;
-	border-style: solid;
-	border-width: 1px 3px;
-	border-color: #77d779;
-	border-radius: 5px;
-	background: #baf4bb;
-	box-shadow: 0 0 3px #c8cdd9;
-	padding: 5px 8px;
-	cursor: grab;
-	user-select: none;
-	line-height: 1.2;
-	position: relative;
-	overflow: hidden;
-}
-.op-parked-item:hover { background: #c8f6c9; border-color: #4fc453; }
-.op-parked-main {
-	font-size: 12px;
-	font-weight: 700;
-	color: #3164AD;
-	padding-right: 74px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.op-parked-sub {
-	font-size: 10px;
-	color: #444;
-	margin-top: 2px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.op-parked-duration {
-	position: absolute;
-	top: 6px;
-	right: 8px;
-	font-size: 12px;
-	color: #4a4a4a;
-	line-height: 1;
-}
-.op-parked-drop-over {
-	box-shadow: 0 0 0 3px #0d6efd;
-	border-color: #0d6efd;
-}
-.op-parked-empty {
-	padding: 10px;
-	font-size: 12px;
-	color: #6c757d;
-	font-style: italic;
-}
-
-@media (max-width: 980px) {
-	#my_extensions_container,
-	#parked_side_container {
-		flex-basis: 100%;
-		min-width: 0;
-	}
-}
-
-/* HTML5 dialog styles */
-.op-dialog {
-	border: 1px solid #ccc;
-	border-radius: 8px;
-	padding: 0;
-	max-width: 400px;
-	width: 90%;
-	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-}
-.op-dialog::backdrop {
-	background: rgba(0,0,0,0.4);
-}
-.op-dialog-sm {
-	max-width: 320px;
-}
-.op-dialog-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 12px 16px;
-	border-bottom: 1px solid #ddd;
-}
-.op-dialog-header h5 {
-	margin: 0;
-	font-size: 1.1rem;
-}
-.op-dialog-close {
-	background: none;
-	border: none;
-	font-size: 1.4rem;
-	cursor: pointer;
-	line-height: 1;
-	padding: 0 4px;
-	opacity: 0.6;
-}
-.op-dialog-close:hover { opacity: 1; }
-.op-dialog-body {
-	padding: 16px;
-}
-.op-dialog-footer {
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-	padding: 12px 16px;
-	border-top: 1px solid #ddd;
-}
-.op-dialog-input {
-	width: 100%;
-	padding: 6px 10px;
-	border: 1px solid #ccc;
-	border-radius: 4px;
-	font-size: 0.95rem;
-	box-sizing: border-box;
-}
-.op-dialog-input:focus {
-	outline: 2px solid #0d6efd;
-	outline-offset: -1px;
-}
-.op-dialog-actions {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-.op-dialog-btn {
-	display: block;
-	width: 100%;
-	padding: 8px 16px;
-	border: none;
-	border-radius: 4px;
-	font-size: 0.95rem;
-	cursor: pointer;
-	color: #fff;
-}
-.op-btn-primary   { background: #0d6efd; }
-.op-btn-primary:hover { background: #0b5ed7; }
-.op-btn-success   { background: #198754; }
-.op-btn-success:hover { background: #157347; }
-.op-btn-info      { background: #0dcaf0; color: #000; }
-.op-btn-info:hover { background: #31d2f2; }
-.op-btn-secondary { background: #6c757d; }
-.op-btn-secondary:hover { background: #5c636a; }
-</style>
-
 <!-- Bootstrap tabs: Extensions | Calls | Conferences | Agents -->
 <ul class="nav nav-tabs" id="lop_tabs" role="tablist" style="margin-bottom:16px;">
 <?php if ($perm['operator_panel_extensions']): ?>
diff --git a/app/operator_panel/resources/css/operator_panel.css b/app/operator_panel/resources/css/operator_panel.css
new file mode 100644
index 0000000000..c02b30df4d
--- /dev/null
+++ b/app/operator_panel/resources/css/operator_panel.css
@@ -0,0 +1,776 @@
+/* Active Operator Panel — extension blocks */
+.op-ext-grid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0;
+	padding: 4px 0 12px;
+}
+/* Status buttons */
+.op-status-btn {
+	border: 2px solid transparent;
+	border-radius: 4px;
+	padding: 3px 10px;
+	font-size: 11px;
+	font-weight: 700;
+	color: #fff;
+	cursor: pointer;
+	text-transform: uppercase;
+	letter-spacing: .5px;
+	line-height: 1.4;
+	transition: opacity .15s, border-color .15s;
+	opacity: 0.55;
+}
+.op-status-btn:hover { opacity: 0.8; }
+.op-status-btn.active { opacity: 1; border-color: rgba(0,0,0,.35); }
+/* Filter bar */
+.op-filter-bar {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 6px 0 10px;
+	flex-wrap: wrap;
+}
+.op-group-filters {
+	display: inline-flex;
+	gap: 4px;
+	flex-wrap: wrap;
+}
+.op-group-filter-btn {
+	border: none;
+	border-radius: 4px;
+	padding: 3px 10px;
+	font-size: 11px;
+	font-weight: 700;
+	color: #fff;
+	cursor: pointer;
+	text-transform: uppercase;
+	letter-spacing: .3px;
+	line-height: 1.4;
+	background-color: #4a8cdb;
+	transition: opacity .15s;
+	opacity: 0.55;
+}
+.op-group-filter-btn:hover { opacity: 0.8; }
+.op-group-filter-btn.active { opacity: 1; background-color: #2a7fff; }
+.op-text-filter {
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	padding: 3px 8px;
+	font-size: 12px;
+	line-height: 1.4;
+	width: 130px;
+	outline: none;
+}
+.op-text-filter:focus { border-color: #80bdff; box-shadow: 0 0 0 2px rgba(0,123,255,.15); }
+/* Edit mode button */
+.op-edit-btn {
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	background: #fff;
+	padding: 3px 8px;
+	font-size: 14px;
+	cursor: pointer;
+	color: #6c757d;
+	line-height: 1;
+	transition: background .15s, color .15s;
+}
+.op-edit-btn:hover { background: #e9ecef; }
+.op-edit-btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
+/* Transfer mode toggle */
+.op-transfer-mode {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	margin-left: auto;
+	font-size: 12px;
+	color: #555;
+	white-space: nowrap;
+}
+.op-transfer-mode-label {
+	font-weight: 600;
+	color: #444;
+}
+.op-transfer-mode-btn {
+	padding: 2px 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	background: #fff;
+	font-size: 11px;
+	font-weight: 600;
+	cursor: pointer;
+	color: #555;
+	transition: background .15s, color .15s, border-color .15s;
+}
+.op-transfer-mode-btn:hover { background: #e9ecef; }
+.op-transfer-mode-btn.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
+/* Context menu */
+.op-ctx-menu {
+	position: fixed;
+	z-index: 9990;
+	background: #fff;
+	border: 1px solid #d0d7de;
+	border-radius: 6px;
+	box-shadow: 0 8px 24px rgba(0,0,0,.18);
+	min-width: 165px;
+	padding: 4px 0;
+	display: none;
+	margin: 0;
+}
+.op-ctx-header {
+	font-size: 11px;
+	color: #888;
+	padding: 3px 14px 2px;
+	text-transform: uppercase;
+	letter-spacing: .5px;
+	font-weight: 600;
+	user-select: none;
+}
+.op-ctx-separator {
+	height: 1px;
+	background: #e0e0e0;
+	margin: 4px 0;
+}
+.op-ctx-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 7px 14px;
+	font-size: 13px;
+	cursor: pointer;
+	color: #24292f;
+	white-space: nowrap;
+	border: none;
+	background: none;
+	width: 100%;
+	text-align: left;
+	line-height: 1.3;
+}
+.op-ctx-item:hover { background: #f0f6ff; }
+.op-ctx-item .op-ctx-icon { font-size: 12px; opacity: .7; flex-shrink: 0; }
+.op-ctx-danger { color: #c9242d; }
+.op-ctx-danger:hover { background: #fff1f0; }
+/* Attended transfer consultation bar */
+.op-att-bar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 9980;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 20px;
+	background: #198754;
+	color: #fff;
+	font-size: 14px;
+	font-weight: 600;
+	box-shadow: 0 -2px 8px rgba(0,0,0,.2);
+}
+.op-att-icon { font-size: 18px; }
+.op-att-label { flex: 1; }
+.op-att-btn {
+	padding: 6px 16px;
+	border: none;
+	border-radius: 4px;
+	font-size: 13px;
+	font-weight: 600;
+	cursor: pointer;
+}
+.op-att-complete {
+	background: #fff;
+	color: #198754;
+}
+.op-att-complete:hover { background: #e9ecef; }
+.op-att-cancel {
+	background: rgba(255,255,255,.2);
+	color: #fff;
+}
+.op-att-cancel:hover { background: rgba(255,255,255,.35); }
+.op-ext-block {
+	display: flex;
+	width: 235px;
+	margin: 0 8px 8px 0;
+	border-style: solid;
+	border-width: 1px 3px;
+	border-radius: 5px;
+	border-color: #b9c5d8;
+	background-color: #e5eaf5;
+	box-shadow: 0 0 3px #c8cdd9;
+	position: relative;
+	overflow: hidden;
+	user-select: none;
+	cursor: default;
+}
+.op-ext-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 47px;
+	width: 47px;
+	background-color: #e5eaf5;
+	border-radius: 4px 0 0 4px;
+	color: #7a8499;
+	font-size: 26px;
+	padding: 4px 0;
+}
+.op-ext-status-icon {
+	font-size: 28px;
+	line-height: 1;
+	color: inherit;
+}
+.op-ext-contact-photo {
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+}
+.op-ext-info {
+	flex: 1;
+	padding: 5px 8px 5px 8px;
+	background: #fff;
+	border-radius: 0 3px 3px 0;
+	font-family: arial, sans-serif;
+	font-size: 10px;
+	min-width: 0;
+	position: relative;
+	min-height: 50px;
+}
+.op-ext-number     { font-size: 12px; font-weight: bold; color: #3164AD; line-height: 1.4; }
+.op-ext-name       { font-size: 10px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.op-ext-state-info { font-size: 10px; color: #555; margin-top: 3px; }
+.op-ext-info.op-has-live-call { padding-right: 78px; padding-bottom: 15px; box-sizing: border-box; }
+.op-ext-info.op-has-live-call .op-ext-state-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.op-ext-mine-label { position: absolute; top: 2px; right: 4px; font-size: 9px; color: #0d6efd; font-weight: 600; }
+.op-ext-dial-wrap  { position: absolute; top: 22px; right: 3px; }
+.op-ext-dial-toggle {
+	border: none;
+	background: transparent;
+	padding: 0;
+	margin: 0;
+	line-height: 0;
+	cursor: pointer;
+}
+.op-ext-dial-toggle img { display: block; }
+.op-ext-dial-input {
+	position: absolute;
+	top: -1px;
+	right: 18px;
+	width: 100px;
+	min-width: 100px;
+	max-width: 100px;
+	height: 20px;
+	padding: 1px 6px;
+	font-size: 12px;
+	border: 1px solid #b9c5d8;
+	border-radius: 2px;
+	background-color: #fff;
+	text-align: center;
+}
+.op-ext-call-meta {
+	position: absolute;
+	top: 2px;
+	right: 20px;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+.op-ext-call-direction {
+	width: 12px;
+	height: 12px;
+	border: none;
+}
+.op-ext-call-duration {
+	font-size: 12px;
+	color: #4a4a4a;
+	line-height: 1;
+}
+.op-ext-call-actions {
+	position: absolute;
+	bottom: 2px;
+	right: 18px;
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+.op-ext-action-icon {
+	width: 12px;
+	height: 12px;
+	border: none;
+	cursor: pointer;
+}
+body.op-dragging, body.op-dragging * {
+	cursor: none !important;
+}
+/* user status: available — green */
+.op-ext-available               { border-color: #28a745; background-color: #d4edda; }
+.op-ext-available .op-ext-icon  { background-color: #c3e6cb; }
+.op-ext-available .op-ext-icon .op-ext-status-icon  { color: #1e7e34; }
+.op-ext-available .op-ext-info  { background-color: #eaf6ec; }
+/* user status: on break — gold */
+.op-ext-on-break               { border-color: #b8860b; background-color: #fdf3d7; }
+.op-ext-on-break .op-ext-icon  { background-color: #f5e6b8; }
+.op-ext-on-break .op-ext-icon .op-ext-status-icon  { color: #8a6508; }
+.op-ext-on-break .op-ext-info  { background-color: #fef9eb; }
+/* user status: do not disturb — red */
+.op-ext-dnd               { border-color: #dc3545; background-color: #f8d7da; }
+.op-ext-dnd .op-ext-icon  { background-color: #f1b0b7; }
+.op-ext-dnd .op-ext-icon .op-ext-status-icon  { color: #a71d2a; }
+.op-ext-dnd .op-ext-info  { background-color: #fce4e7; }
+/* registered (no explicit status / no user attached) — blue */
+.op-ext-registered               { border-color: #4a8cdb; background-color: #d6e9f8; }
+.op-ext-registered .op-ext-icon  { background-color: #c3ddf2; }
+.op-ext-registered .op-ext-icon .op-ext-status-icon  { color: #2b6cb0; }
+.op-ext-registered .op-ext-info  { background-color: #eaf3fc; }
+/* user status: logged out — grey */
+.op-ext-logged-out               { border-color: #9da5ae; background-color: #e2e3e5; }
+.op-ext-logged-out .op-ext-icon  { background-color: #d6d8db; }
+.op-ext-logged-out .op-ext-icon .op-ext-status-icon  { color: #1e7e34; }
+.op-ext-logged-out .op-ext-info  { background-color: #f0f1f2; }
+.op-ext-logged-out .op-ext-number { color: #888; }
+.op-ext-logged-out .op-ext-name  { color: #999; }
+/* unregistered — grey with muted content */
+.op-ext-unregistered               { border-color: #9da5ae; background-color: #e2e3e5; cursor: not-allowed; }
+.op-ext-unregistered .op-ext-icon  { background-color: #d6d8db; }
+.op-ext-unregistered .op-ext-icon .op-ext-status-icon  { color: #6c757d; opacity: .4; filter: grayscale(100%); }
+.op-ext-unregistered .op-ext-info  { background-color: #f0f1f2; color: #999; }
+.op-ext-unregistered .op-ext-number { color: #999; }
+.op-ext-unregistered .op-ext-name  { color: #aaa; }
+/* call state: ringing — blue */
+.op-ext-ringing               { border-color: #41b9eb; background-color: #a8dbf0; }
+.op-ext-ringing .op-ext-icon  { background-color: #a8dbf0; }
+.op-ext-ringing .op-ext-icon .op-ext-status-icon  { color: #0e6882; }
+.op-ext-ringing .op-ext-info  { background-color: #d1f1ff; }
+/* call state: active (on call) — bright green */
+.op-ext-active                { border-color: #77d779; background-color: #baf4bb; }
+.op-ext-active .op-ext-icon   { background-color: #baf4bb; }
+.op-ext-active .op-ext-icon .op-ext-status-icon   { color: #2a7a2b; }
+.op-ext-active .op-ext-info   { background-color: #e1ffe2; }
+/* call state: held — teal */
+.op-ext-held                  { border-color: #5bbfd1; background-color: #b3e5ee; }
+.op-ext-held .op-ext-icon     { background-color: #b3e5ee; }
+.op-ext-held .op-ext-icon .op-ext-status-icon     { color: #1a6c7a; }
+.op-ext-held .op-ext-info     { background-color: #ddf4f8; }
+/* mine highlight */
+.op-ext-mine       { border-width: 2px 3px !important; border-color: #0d6efd !important; }
+/* drop target */
+.op-ext-drop-over  { box-shadow: 0 0 0 3px #0d6efd; }
+.op-ext-drop-over .op-ext-info { background-color: #cfe2ff !important; }
+/* section labels */
+.op-ext-section-label { font-weight: 600; font-size: .85em; color: #6c757d; margin: 8px 0 4px; width: 100%; }
+/* My Extensions container — own line above other groups */
+#my_extensions_container:not(:empty) {
+	margin-bottom: 14px;
+	padding-bottom: 10px;
+}
+/* call group cards */
+.op-group-card {
+	border: 1px solid #d0d8e5;
+	border-radius: 5px;
+	background-color: #fff;
+	box-shadow: 0 1px 3px #d0d8e5;
+	margin-bottom: 14px;
+	overflow: hidden;
+	display: inline-flex;
+	vertical-align: top;
+	margin-right: 14px;
+}
+.op-group-card.op-hidden { display: none; }
+
+/* Card frame orientation by label position */
+.op-group-card[data-position="left"]   { flex-direction: row; }
+.op-group-card[data-position="right"]  { flex-direction: row-reverse; }
+.op-group-card[data-position="top"]    { flex-direction: column; }
+.op-group-card[data-position="bottom"] { flex-direction: column-reverse; }
+.op-group-card[data-position="hidden"] { flex-direction: row; }
+/* Edit mode: cards grid container */
+#extensions_container {
+	transition: background .2s;
+}
+#extensions_container.op-edit-mode .op-group-card {
+	cursor: grab;
+	border: 2px dashed #80bdff;
+}
+#extensions_container.op-edit-mode .op-group-card.sortable-ghost {
+	opacity: .4;
+}
+/* In edit mode, force hidden headers visible so Sortable has a drag handle */
+#extensions_container.op-edit-mode .op-group-card[data-position="hidden"] .op-group-card-header {
+	display: flex;
+	min-width: 18px;
+	padding: 4px 2px;
+	cursor: grab;
+	background: #d0d8e5;
+	writing-mode: vertical-rl;
+	text-orientation: mixed;
+	transform: rotate(180deg);
+	align-items: center;
+	justify-content: center;
+	font-size: 11px;
+	color: #888;
+}
+/* Card header - default/left side orientation with vertical text */
+.op-group-card-header {
+	background-color: #e5e9f0;
+	padding: 8px 4px;
+	font-size: 12px;
+	font-weight: 600;
+	color: #444;
+	border-right: 1px solid #d0d8e5;
+	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
+	writing-mode: vertical-rl;
+	text-orientation: mixed;
+	transform: rotate(180deg);
+	letter-spacing: .6px;
+	text-transform: uppercase;
+	white-space: nowrap;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 34px;
+}
+
+/* Top position - horizontal text, border at bottom */
+.op-group-card[data-position="top"] .op-group-card-header {
+	writing-mode: horizontal-tb;
+	transform: none;
+	border-right: none;
+	border-bottom: 1px solid #d0d8e5;
+	min-width: auto;
+	padding: 6px 12px;
+}
+
+/* Right position - vertical text, border at left */
+.op-group-card[data-position="right"] .op-group-card-header {
+	writing-mode: vertical-rl;
+	text-orientation: mixed;
+	transform: rotate(0deg);
+	border-right: none;
+	border-left: 1px solid #d0d8e5;
+	min-width: 34px;
+}
+
+/* Bottom position - horizontal text, border at top */
+.op-group-card[data-position="bottom"] .op-group-card-header {
+	writing-mode: horizontal-tb;
+	transform: none;
+	border-right: none;
+	border-top: 1px solid #d0d8e5;
+	min-width: auto;
+	padding: 6px 12px;
+}
+
+/* Hidden position - no header visible */
+.op-group-card[data-position="hidden"] .op-group-card-header {
+	display: none;
+}
+/* Tooltip on hover - show group name in title attribute */
+.op-group-card:hover {
+	cursor: help;
+}
+/* Hide text for "My Extensions" but keep grey shading */
+.op-group-card-header.op-hidden-text {
+	color: transparent;
+	text-shadow: none;
+}
+.op-group-card-body {
+	padding: 10px 8px 4px;
+	flex: 1;
+}
+
+/* Top row in Extensions tab: My Extensions + Parked */
+.op-top-row {
+	display: flex;
+	align-items: stretch;
+	gap: 14px;
+	flex-wrap: wrap;
+	margin-bottom: 14px;
+}
+#my_extensions_container,
+#parked_side_container {
+	flex: 1 1 420px;
+	min-width: 320px;
+}
+#my_extensions_container:not(:empty),
+#parked_side_container:not(:empty) {
+	margin-bottom: 0;
+	padding-bottom: 0;
+}
+
+/* Parked side panel */
+.op-parked-card {
+	border: 1px solid #d0d8e5;
+	border-radius: 5px;
+	background-color: #fff;
+	box-shadow: 0 1px 3px #d0d8e5;
+	overflow: hidden;
+	display: flex;
+	flex-direction: row;
+}
+.op-parked-header {
+	background-color: #e5e9f0;
+	padding: 8px 4px;
+	font-size: 12px;
+	font-weight: 600;
+	color: #444;
+	border-right: 1px solid #d0d8e5;
+	font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
+	writing-mode: vertical-rl;
+	text-orientation: mixed;
+	transform: rotate(180deg);
+	letter-spacing: .6px;
+	text-transform: uppercase;
+	white-space: nowrap;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 34px;
+}
+.op-parked-list {
+	padding: 8px;
+	max-height: 280px;
+	overflow: auto;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+.op-parked-item {
+	width: 235px;
+	min-height: 50px;
+	border-style: solid;
+	border-width: 1px 3px;
+	border-color: #77d779;
+	border-radius: 5px;
+	background: #baf4bb;
+	box-shadow: 0 0 3px #c8cdd9;
+	padding: 5px 8px;
+	cursor: grab;
+	user-select: none;
+	line-height: 1.2;
+	position: relative;
+	overflow: hidden;
+}
+.op-parked-item:hover { background: #c8f6c9; border-color: #4fc453; }
+.op-parked-main {
+	font-size: 12px;
+	font-weight: 700;
+	color: #3164AD;
+	padding-right: 74px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.op-parked-sub {
+	font-size: 10px;
+	color: #444;
+	margin-top: 2px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.op-parked-duration {
+	position: absolute;
+	top: 6px;
+	right: 8px;
+	font-size: 12px;
+	color: #4a4a4a;
+	line-height: 1;
+}
+.op-parked-drop-over {
+	box-shadow: 0 0 0 3px #0d6efd;
+	border-color: #0d6efd;
+}
+.op-parked-empty {
+	padding: 10px;
+	font-size: 12px;
+	color: #6c757d;
+	font-style: italic;
+}
+
+/* Calls tab three-pane layout */
+.op-calls-layout {
+	display: flex;
+	gap: 14px;
+	align-items: stretch;
+	min-height: 420px;
+}
+.op-calls-pane {
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+.op-calls-pane-left {
+	flex: 1 1 50%;
+}
+.op-calls-pane-right {
+	flex: 1 1 50%;
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+.op-calls-pane-half {
+	flex: 1 1 0;
+	min-height: 0;
+}
+.op-calls-card {
+	height: 100%;
+	margin-bottom: 0;
+	display: flex;
+	flex-direction: column;
+}
+.op-calls-card-title {
+	padding: 8px 12px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: .4px;
+	text-transform: uppercase;
+	color: #495057;
+	border-bottom: 1px solid #d0d8e5;
+	background: #f8f9fb;
+	cursor: grab;
+	user-select: none;
+}
+.op-calls-card-title:active {
+	cursor: grabbing;
+}
+.op-calls-drag-hint {
+	font-size: 10px;
+	font-weight: 700;
+	letter-spacing: .3px;
+	color: #6c757d;
+}
+.op-calls-slot-over {
+	position: relative;
+}
+.op-calls-slot-over::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border: 2px dashed #0d6efd;
+	border-radius: 6px;
+	pointer-events: none;
+	z-index: 10;
+}
+.op-calls-card-dragging {
+	opacity: 0.72;
+}
+.op-calls-table-wrap {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+}
+.op-calls-card .list {
+	margin-bottom: 0;
+}
+.op-calls-empty {
+	margin: 10px 12px;
+	font-size: 12px;
+	font-style: italic;
+}
+
+@media (max-width: 980px) {
+	#my_extensions_container,
+	#parked_side_container {
+		flex-basis: 100%;
+		min-width: 0;
+	}
+	.op-calls-layout {
+		flex-direction: column;
+		min-height: 0;
+	}
+	.op-calls-pane-left,
+	.op-calls-pane-right,
+	.op-calls-pane-half {
+		flex: 1 1 auto;
+	}
+}
+
+/* HTML5 dialog styles */
+.op-dialog {
+	border: 1px solid #ccc;
+	border-radius: 8px;
+	padding: 0;
+	max-width: 400px;
+	width: 90%;
+	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+}
+.op-dialog::backdrop {
+	background: rgba(0,0,0,0.4);
+}
+.op-dialog-sm {
+	max-width: 320px;
+}
+.op-dialog-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid #ddd;
+}
+.op-dialog-header h5 {
+	margin: 0;
+	font-size: 1.1rem;
+}
+.op-dialog-close {
+	background: none;
+	border: none;
+	font-size: 1.4rem;
+	cursor: pointer;
+	line-height: 1;
+	padding: 0 4px;
+	opacity: 0.6;
+}
+.op-dialog-close:hover { opacity: 1; }
+.op-dialog-body {
+	padding: 16px;
+}
+.op-dialog-footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 12px 16px;
+	border-top: 1px solid #ddd;
+}
+.op-dialog-input {
+	width: 100%;
+	padding: 6px 10px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	font-size: 0.95rem;
+	box-sizing: border-box;
+}
+.op-dialog-input:focus {
+	outline: 2px solid #0d6efd;
+	outline-offset: -1px;
+}
+.op-dialog-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.op-dialog-btn {
+	display: block;
+	width: 100%;
+	padding: 8px 16px;
+	border: none;
+	border-radius: 4px;
+	font-size: 0.95rem;
+	cursor: pointer;
+	color: #fff;
+}
+.op-btn-primary   { background: #0d6efd; }
+.op-btn-primary:hover { background: #0b5ed7; }
+.op-btn-success   { background: #198754; }
+.op-btn-success:hover { background: #157347; }
+.op-btn-info      { background: #0dcaf0; color: #000; }
+.op-btn-info:hover { background: #31d2f2; }
+.op-btn-secondary { background: #6c757d; }
+.op-btn-secondary:hover { background: #5c636a; }
\ No newline at end of file
diff --git a/app/operator_panel/resources/javascript/operator_panel.js b/app/operator_panel/resources/javascript/operator_panel.js
index 6d7d44c6f6..37d481058b 100644
--- a/app/operator_panel/resources/javascript/operator_panel.js
+++ b/app/operator_panel/resources/javascript/operator_panel.js
@@ -112,6 +112,51 @@ let sortable_instance = null;
 
 /** Saved card order (array of group keys). Persisted to localStorage. */
 let saved_card_order = null;
+const calls_layout_slot_keys = ['left', 'right_top', 'right_bottom'];
+const calls_layout_view_keys = ['all', 'incoming', 'outgoing'];
+let calls_layout_order = null;
+let dragged_calls_panel_view = '';
+let _op_calls_doc_drag_handler = null;
+let _op_calls_slot_rects = [];  /* [{el, rect}] cached on dragstart */
+let _op_calls_highlighted_slot = null;
+let _op_calls_render_deferred = false;  /* true when render_calls_tab was skipped during drag */
+
+function clear_calls_panel_slot_over() {
+	document.querySelectorAll('.op-calls-slot-over').forEach(el => el.classList.remove('op-calls-slot-over'));
+	_op_calls_highlighted_slot = null;
+}
+
+/**
+ * Find which .op-calls-slot the cursor (clientX/Y) is over using cached bounding rects.
+ * This avoids all e.target / pointer-events issues.
+ */
+function _op_calls_slot_from_point(x, y) {
+	for (let i = 0; i < _op_calls_slot_rects.length; i++) {
+		const r = _op_calls_slot_rects[i].rect;
+		if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) {
+			return _op_calls_slot_rects[i];
+		}
+	}
+	return null;
+}
+
+/**
+ * Document-level dragover handler attached only while a Calls panel header is being dragged.
+ * Uses bounding-rect hit testing to reliably find the destination slot.
+ */
+function _op_calls_panel_doc_drag(e) {
+	if (!dragged_calls_panel_view) return;
+	const hit = _op_calls_slot_from_point(e.clientX, e.clientY);
+	const slot = hit ? hit.el : null;
+	/* Allow drop when cursor is over any slot */
+	if (slot) e.preventDefault();
+	/* Update highlighted slot only when it changes */
+	if (slot !== _op_calls_highlighted_slot) {
+		if (_op_calls_highlighted_slot) _op_calls_highlighted_slot.classList.remove('op-calls-slot-over');
+		if (slot) slot.classList.add('op-calls-slot-over');
+		_op_calls_highlighted_slot = slot;
+	}
+}
 let all_group_keys_for_filters = [];
 let tabs_initialized = false;
 
@@ -208,6 +253,12 @@ function get_extension_group_key(ext_number) {
 	return normalize_group_key(ext.call_group || '');
 }
 
+function get_extension_display_name(ext_number) {
+	const ext = extensions_map.get((ext_number || '').toString());
+	if (!ext) return '';
+	return ((ext.effective_caller_id_name || ext.description || '') + '').trim();
+}
+
 function get_call_group_key(call) {
 	const presence = ((call.channel_presence_id || '').split('@')[0] || '').trim();
 	const dest     = ((call.caller_destination_number || '') + '').trim();
@@ -1113,10 +1164,80 @@ function get_conversation_call_uuids(uuid) {
 	return all;
 }
 
+function normalize_calls_layout_order(raw_order) {
+	const normalized = [];
+	if (Array.isArray(raw_order)) {
+		raw_order.forEach(value => {
+			const view_key = ((value || '') + '').trim().toLowerCase();
+			if (calls_layout_view_keys.includes(view_key) && !normalized.includes(view_key)) {
+				normalized.push(view_key);
+			}
+		});
+	}
+	calls_layout_view_keys.forEach(view_key => {
+		if (!normalized.includes(view_key)) normalized.push(view_key);
+	});
+	return normalized.slice(0, calls_layout_slot_keys.length);
+}
+
+function load_calls_layout_order() {
+	try {
+		const raw = localStorage.getItem('op_calls_layout_' + domain_name);
+		calls_layout_order = raw
+			? normalize_calls_layout_order(JSON.parse(raw))
+			: normalize_calls_layout_order(null);
+	} catch (err) {
+		calls_layout_order = normalize_calls_layout_order(null);
+	}
+}
+
+function save_calls_layout_order() {
+	if (!Array.isArray(calls_layout_order)) return;
+	try {
+		localStorage.setItem('op_calls_layout_' + domain_name, JSON.stringify(calls_layout_order));
+	} catch (err) {
+		// Ignore storage access errors.
+	}
+}
+
+function get_calls_layout_view_for_slot(slot_key) {
+	if (!Array.isArray(calls_layout_order)) load_calls_layout_order();
+	const slot_index = calls_layout_slot_keys.indexOf(((slot_key || '') + '').toLowerCase());
+	if (slot_index === -1) return calls_layout_view_keys[0];
+	return calls_layout_order[slot_index] || calls_layout_view_keys[slot_index] || calls_layout_view_keys[0];
+}
+
+function move_calls_panel_view_to_slot(view_key, slot_key) {
+	if (!Array.isArray(calls_layout_order)) load_calls_layout_order();
+
+	const view = ((view_key || '') + '').trim().toLowerCase();
+	const slot = ((slot_key || '') + '').trim().toLowerCase();
+	const from_index = calls_layout_order.indexOf(view);
+	const to_index = calls_layout_slot_keys.indexOf(slot);
+
+	if (!calls_layout_view_keys.includes(view) || from_index === -1 || to_index === -1 || from_index === to_index) {
+		return false;
+	}
+
+	const displaced = calls_layout_order[to_index];
+	calls_layout_order[to_index] = view;
+	calls_layout_order[from_index] = displaced;
+	save_calls_layout_order();
+	return true;
+}
+
 /**
  * Render the Calls tab from the in-memory calls_map.
  */
 function render_calls_tab() {
+	/* While a Calls panel header is being dragged, defer rendering so the DOM
+	   isn't replaced mid-drag (which would orphan cached slot elements and wipe
+	   the destination-slot highlight class). The deferred render fires in
+	   on_calls_panel_drag_end(). */
+	if (dragged_calls_panel_view) {
+		_op_calls_render_deferred = true;
+		return;
+	}
 	const container = document.getElementById('calls_container');
 	if (!container) return;
 
@@ -1131,28 +1252,28 @@ function render_calls_tab() {
 		return;
 	}
 
-	let html = "<div class='card'>\n";
-	html += "<table class='list'>\n";
-	html += "<tr class='list-header'>\n";
-	html += `<th class="mono" style="width:28px"></th>\n`;
-	html += `<th>${esc(text['label-caller_id'] || 'Caller ID')}</th>\n`;
-	html += `<th>${esc(text['label-destination'] || 'Destination')}</th>\n`;
-	html += `<th>${esc(text['label-state'] || 'State')}</th>\n`;
-	html += `<th>${esc(text['label-duration'] || 'Duration')}</th>\n`;
-	html += `<th class="right">${esc(text['label-actions'] || 'Actions')}</th>\n`;
-	html += "</tr>\n";
+	const columns_html =
+		`<tr class="list-header">\n`
+		+ `<th class="mono" style="width:28px"></th>\n`
+		+ `<th>${esc(text['label-extension'] || 'Extension')}</th>\n`
+		+ `<th>${esc(text['label-name'] || 'Name')}</th>\n`
+		+ `<th>${esc(text['label-destination'] || 'Destination')}</th>\n`
+		+ `<th>${esc(text['label-state'] || 'State')}</th>\n`
+		+ `<th>${esc(text['label-duration'] || 'Duration')}</th>\n`
+		+ `<th class="right">${esc(text['label-actions'] || 'Actions')}</th>\n`
+		+ `</tr>\n`;
 
-	calls.forEach(ch => {
-		const uuid_raw      = get_call_uuid(ch);
-		if (!uuid_raw) return;
-		const uuid          = esc(uuid_raw);
-		const group_key     = esc(get_call_group_key(ch));
-		const ext_number    = ((ch.channel_presence_id || '').split('@')[0] || '').trim();
-		const raw_cid_name  = (ch.caller_caller_id_name   || ch.caller_id_name   || '').toString();
-		const raw_cid_num   = (ch.caller_caller_id_number || ch.caller_id_number || '').toString().trim();
-		const raw_dest_num  = (ch.caller_destination_number || '').toString().trim();
+	function build_call_row(ch) {
+		const uuid_raw = get_call_uuid(ch);
+		if (!uuid_raw) return null;
+
+		const uuid = esc(uuid_raw);
+		const group_key = esc(get_call_group_key(ch));
+		const ext_number = ((ch.channel_presence_id || '').split('@')[0] || '').trim();
+		const raw_cid_name = (ch.caller_caller_id_name || ch.caller_id_name || '').toString();
+		const raw_cid_num = (ch.caller_caller_id_number || ch.caller_id_number || '').toString().trim();
+		const raw_dest_num = (ch.caller_destination_number || '').toString().trim();
 
-		// Derive per-leg direction so B-leg rows do not incorrectly show outbound.
 		let direction_raw = (ch.call_direction || ch.variable_call_direction || '').toString().toLowerCase();
 		if (ext_number && raw_cid_num && raw_dest_num) {
 			if (ext_number === raw_cid_num && ext_number !== raw_dest_num) {
@@ -1163,11 +1284,9 @@ function render_calls_tab() {
 			}
 		}
 
-		const peer_number   = resolve_peer_number_for_leg(ch, ext_number, direction_raw);
+		const peer_number = resolve_peer_number_for_leg(ch, ext_number, direction_raw);
 		let caller_number_raw = (ext_number || raw_cid_num || '').toString().trim();
 
-		// If this leg is ambiguous (same number on both CID and destination),
-		// show the inferred peer as the leg owner for inbound perspective.
 		if (direction_raw === 'inbound' && raw_cid_num && raw_dest_num && raw_cid_num === raw_dest_num && peer_number && raw_cid_num !== peer_number) {
 			caller_number_raw = peer_number;
 		}
@@ -1176,54 +1295,133 @@ function render_calls_tab() {
 			else if (raw_cid_num && raw_cid_num !== peer_number) caller_number_raw = raw_cid_num;
 		}
 
-		const cid_name      = esc(raw_cid_name);
-		const cid_number    = esc(caller_number_raw);
-		const dest          = esc(peer_number || raw_dest_num || ext_number);
-		const state         = esc(ch.channel_call_state       || ch.answer_state    || '');
-		const direction     = esc(direction_raw);
+		const extension_number_raw = (ext_number || caller_number_raw || '').toString().trim();
+		let extension_name_raw = '';
+		if (extension_number_raw) {
+			extension_name_raw = get_extension_display_name(extension_number_raw);
+			if (!extension_name_raw && extension_number_raw === raw_cid_num) {
+				extension_name_raw = raw_cid_name;
+			}
+		}
+		if (extension_name_raw && extension_name_raw === extension_number_raw) {
+			extension_name_raw = '';
+		}
+		if (extension_name_raw) {
+			const n = extension_name_raw.toLowerCase();
+			if (n === 'outbound call' || n === 'inbound call') extension_name_raw = '';
+		}
+
+		const extension_number = esc(extension_number_raw);
+		const extension_name = esc(extension_name_raw);
+		const dest = esc(peer_number || raw_dest_num || ext_number);
+		const state = esc(ch.channel_call_state || ch.answer_state || '');
+		const direction = esc(direction_raw);
 		const direction_icon = direction_raw === 'inbound'
 			? '../operator_panel/resources/images/inbound.png'
 			: (direction_raw === 'outbound' ? '../operator_panel/resources/images/outbound.png' : '');
-		const created_ts    = ch.caller_channel_created_time  || '0';
-		const elapsed       = esc(format_elapsed(created_ts));
-		const is_recording  = call_is_recording(ch, uuid_raw);
-		const record_icon   = is_recording
+		const created_ts = ch.caller_channel_created_time || '0';
+		const elapsed = esc(format_elapsed(created_ts));
+		const is_recording = call_is_recording(ch, uuid_raw);
+		const record_icon = is_recording
 			? '../operator_panel/resources/images/recording.png'
 			: '../operator_panel/resources/images/record.png';
 
-		html += `<tr class="list-row" id="call_row_${uuid}" draggable="true" data-uuid="${uuid}" data-group-key="${group_key}" ondragstart="on_drag_call('${uuid}', event)" ondragend="on_drag_end(); document.querySelectorAll('.op-ext-block').forEach(b=>b.classList.remove('op-ext-drop-over'))" oncontextmenu="on_call_contextmenu(event, '${uuid}')">\n`;
-		const show_cid_name = raw_cid_name && raw_cid_name.toLowerCase() !== 'outbound call' && raw_cid_name.toLowerCase() !== 'inbound call';
-		html += `  <td class="mono">${direction_icon ? `<img src="${direction_icon}" width="12" height="12" alt="${direction}" title="${direction}" style="vertical-align:middle;">` : ''}</td>\n`;
-		html += `  <td>${show_cid_name ? `${cid_name}<br><small>${cid_number}</small>` : cid_number}</td>\n`;
-		html += `  <td>${dest}</td>\n`;
-		html += `  <td>${state}</td>\n`;
-		html += `  <td class="mono" data-created="${created_ts}">${elapsed}</td>\n`;
-		html += `  <td class="right">\n`;
+		let row_html = `<tr class="list-row" draggable="true" data-uuid="${uuid}" data-group-key="${group_key}" ondragstart="on_drag_call('${uuid}', event)" ondragend="on_drag_end(); document.querySelectorAll('.op-ext-block').forEach(b=>b.classList.remove('op-ext-drop-over'))" oncontextmenu="on_call_contextmenu(event, '${uuid}')">\n`;
+		row_html += `  <td class="mono">${direction_icon ? `<img src="${direction_icon}" width="12" height="12" alt="${direction}" title="${direction}" style="vertical-align:middle;">` : ''}</td>\n`;
+		row_html += `  <td>${extension_number}</td>\n`;
+		row_html += `  <td>${extension_name}</td>\n`;
+		row_html += `  <td>${dest}</td>\n`;
+		row_html += `  <td>${state}</td>\n`;
+		row_html += `  <td class="mono" data-created="${created_ts}">${elapsed}</td>\n`;
+		row_html += `  <td class="right">\n`;
 
 		if (permissions.operator_panel_hangup) {
-			html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-hangup'] || 'Hangup')}" onclick="action_hangup('${uuid}')">`
+			row_html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-hangup'] || 'Hangup')}" onclick="action_hangup('${uuid}')">`
 				+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/kill.png" alt="${esc(text['button-hangup'] || 'Hangup')}"></a> `;
 		}
 		if (permissions.operator_panel_eavesdrop) {
-			html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-eavesdrop'] || 'Eavesdrop')}" onclick="action_eavesdrop('${uuid}')">`
+			row_html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-eavesdrop'] || 'Eavesdrop')}" onclick="action_eavesdrop('${uuid}')">`
 				+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/eavesdrop.png" alt="${esc(text['button-eavesdrop'] || 'Eavesdrop')}"></a> `;
 		}
 		if (permissions.operator_panel_coach) {
-			html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-whisper'] || 'Whisper')}" onclick="action_whisper('${uuid}')">`
+			row_html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-whisper'] || 'Whisper')}" onclick="action_whisper('${uuid}')">`
 				+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/whisper.svg" alt="${esc(text['button-whisper'] || 'Whisper')}"></a> `;
-			html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-barge'] || 'Barge')}" onclick="action_barge('${uuid}')">`
+			row_html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-barge'] || 'Barge')}" onclick="action_barge('${uuid}')">`
 				+ `<img class="op-ext-action-icon" src="../operator_panel/resources/images/barge.svg" alt="${esc(text['button-barge'] || 'Barge')}"></a> `;
 		}
 		if (permissions.operator_panel_record) {
-			html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-record'] || 'Record')}" onclick="action_record('${uuid}')">`
+			row_html += `    <a class="btn-action" href="javascript:void(0)" title="${esc(text['button-record'] || 'Record')}" onclick="action_record('${uuid}')">`
 				+ `<img class="op-ext-action-icon" src="${record_icon}" alt="${esc(text['button-record'] || 'Record')}"></a> `;
 		}
 
-		html += "  </td>\n";
-		html += "</tr>\n";
+		row_html += "  </td>\n";
+		row_html += "</tr>\n";
+
+		return {
+			row_html,
+			direction: direction_raw,
+		};
+	}
+
+	function render_calls_section(view_key, title, rows_html, empty_label, extra_class) {
+		return `<section class="card op-calls-card ${extra_class || ''}" data-calls-view="${esc(view_key)}">`
+			+ `<div class="op-calls-card-title" draggable="true" ondragstart="on_calls_panel_drag_start(event, '${view_key}')" ondragend="on_calls_panel_drag_end(event)" title="${esc(text['label-drag_to_rearrange'] || 'Drag to rearrange panel')}">${esc(title)}<span class="op-calls-drag-hint">DRAG</span></div>`
+			+ `<div class="op-calls-table-wrap">`
+			+ `<table class="list">`
+			+ columns_html
+			+ `<tbody>${rows_html.join('')}</tbody>`
+			+ `</table>`
+			+ `</div>`
+			+ `<p class="text-muted op-calls-empty"${rows_html.length ? ' style="display:none;"' : ''}>${esc(empty_label)}</p>`
+			+ `</section>`;
+	}
+
+	const all_rows = [];
+	const incoming_rows = [];
+	const outgoing_rows = [];
+
+	calls.forEach(ch => {
+		const rendered = build_call_row(ch);
+		if (!rendered) return;
+
+		all_rows.push(rendered.row_html);
+		if (rendered.direction === 'inbound') {
+			incoming_rows.push(rendered.row_html);
+		}
+		else if (rendered.direction === 'outbound') {
+			outgoing_rows.push(rendered.row_html);
+		}
 	});
 
-	html += "</table>\n</div>\n";
+	if (all_rows.length === 0) {
+		container.innerHTML = `<p class="text-muted">${esc(text['label-no_calls_active'] || 'No active calls.')}</p>`;
+		return;
+	}
+	if (!Array.isArray(calls_layout_order)) load_calls_layout_order();
+
+	const sections_by_view = {
+		all: render_calls_section('all', text['tab-calls'] || text['label-tab_calls'] || 'Calls', all_rows, text['label-no_calls_active'] || 'No active calls.', 'op-calls-card-all'),
+		incoming: render_calls_section('incoming', 'Incoming Calls', incoming_rows, 'No incoming calls.', 'op-calls-card-incoming'),
+		outgoing: render_calls_section('outgoing', 'Outgoing Calls', outgoing_rows, 'No outgoing calls.', 'op-calls-card-outgoing'),
+	};
+
+	const left_view = get_calls_layout_view_for_slot('left');
+	const right_top_view = get_calls_layout_view_for_slot('right_top');
+	const right_bottom_view = get_calls_layout_view_for_slot('right_bottom');
+
+	function render_calls_slot(slot_key, section_html, extra_class) {
+		const classes = `op-calls-pane op-calls-slot ${extra_class || ''}`.trim();
+		return `<div class="${classes}" data-slot-key="${esc(slot_key)}" ondrop="on_calls_panel_drop(event, '${slot_key}')">${section_html}</div>`;
+	}
+
+	let html = `<div class="op-calls-layout">`;
+	html += render_calls_slot('left', sections_by_view[left_view], 'op-calls-pane-left');
+	html += `<div class="op-calls-pane op-calls-pane-right">`;
+	html += render_calls_slot('right_top', sections_by_view[right_top_view], 'op-calls-pane-half');
+	html += render_calls_slot('right_bottom', sections_by_view[right_bottom_view], 'op-calls-pane-half');
+	html += `</div>`;
+	html += `</div>`;
+
 	container.innerHTML = html;
 	apply_calls_filters();
 }
@@ -2797,29 +2995,42 @@ function matches_group_filter(group_key) {
 function apply_calls_filters() {
 	const container = document.getElementById('calls_container');
 	if (!container) return;
-	const table = container.querySelector('table.list');
-	if (!table) return;
+	const rows = container.querySelectorAll('tr.list-row');
+	if (!rows.length) return;
 
 	const filter_text = (((document.getElementById('calls_text_filter') || {}).value) || '').trim().toLowerCase();
-	let visible_count = 0;
-	table.querySelectorAll('tr.list-row').forEach(row => {
+	let visible_total = 0;
+	rows.forEach(row => {
 		const group_key = row.getAttribute('data-group-key') || '';
 		const group_ok = matches_group_filter(group_key);
 		const text_ok = !filter_text || (row.textContent || '').toLowerCase().indexOf(filter_text) !== -1;
 		const show = group_ok && text_ok;
 		row.style.display = show ? '' : 'none';
-		if (show) visible_count++;
+		if (show) visible_total++;
+	});
+
+	container.querySelectorAll('.op-calls-card').forEach(card => {
+		const card_rows = card.querySelectorAll('tbody tr.list-row');
+		let card_visible = 0;
+		card_rows.forEach(row => {
+			if (row.style.display !== 'none') card_visible++;
+		});
+		const card_empty = card.querySelector('.op-calls-empty');
+		if (card_empty) {
+			card_empty.style.display = card_visible === 0 ? '' : 'none';
+		}
 	});
 
 	let empty = container.querySelector('.op-empty-filter-result');
-	if (visible_count === 0) {
+	if (visible_total === 0) {
 		if (!empty) {
 			empty = document.createElement('p');
 			empty.className = 'text-muted op-empty-filter-result';
 			empty.textContent = text['label-no_calls_active'] || 'No active calls.';
 			container.appendChild(empty);
 		}
-	} else if (empty) {
+	}
+	else if (empty) {
 		empty.remove();
 	}
 }
@@ -3154,6 +3365,82 @@ function schedule_extensions_render() {
 	extensions_render_debounce = setTimeout(render_extensions_tab, 120);
 }
 
+function on_calls_panel_drag_start(event, view_key) {
+	dragged_calls_panel_view = ((view_key || '') + '').trim().toLowerCase();
+	if (!calls_layout_view_keys.includes(dragged_calls_panel_view)) {
+		dragged_calls_panel_view = '';
+		return;
+	}
+
+	if (event && event.dataTransfer) {
+		event.dataTransfer.effectAllowed = 'move';
+		event.dataTransfer.setData('text/plain', dragged_calls_panel_view);
+	}
+
+	const card = event && event.target ? event.target.closest('.op-calls-card') : null;
+	if (card) card.classList.add('op-calls-card-dragging');
+	const layout = document.querySelector('.op-calls-layout');
+	if (layout) layout.classList.add('op-calls-layout-dragging');
+
+	/* Cache bounding rects of all slot elements for hit-testing during drag.
+	 * This avoids relying on e.target / pointer-events which are unreliable during drag. */
+	_op_calls_slot_rects = [];
+	document.querySelectorAll('.op-calls-slot').forEach(function(el) {
+		_op_calls_slot_rects.push({ el: el, rect: el.getBoundingClientRect() });
+	});
+
+	/* Attach a single document-level dragover handler for destination-slot highlighting. */
+	if (_op_calls_doc_drag_handler) {
+		document.removeEventListener('dragover', _op_calls_doc_drag_handler);
+	}
+	_op_calls_doc_drag_handler = _op_calls_panel_doc_drag;
+	document.addEventListener('dragover', _op_calls_doc_drag_handler);
+}
+
+/* on_calls_panel_drag_enter / drag_over / drag_leave are no longer wired to slot elements.
+ * Highlighting is handled entirely by the document-level _op_calls_panel_doc_drag listener
+ * attached in on_calls_panel_drag_start and removed in on_calls_panel_drag_end.
+ * These stubs are kept so any legacy references do not throw. */
+function on_calls_panel_drag_enter(event) {}
+function on_calls_panel_drag_over(event) {}
+function on_calls_panel_drag_leave(event) {}
+
+function on_calls_panel_drop(event, slot_key) {
+	event.preventDefault();
+
+	if (!dragged_calls_panel_view) { clear_calls_panel_slot_over(); return; }
+	/* Resolve drop slot using bounding-rect hit test, fall back to inline slot_key */
+	const hit = _op_calls_slot_from_point(event.clientX, event.clientY);
+	const resolved_slot_key = (hit && hit.el && hit.el.dataset && hit.el.dataset.slotKey)
+		? hit.el.dataset.slotKey
+		: slot_key;
+	const moved = move_calls_panel_view_to_slot(dragged_calls_panel_view, resolved_slot_key);
+	on_calls_panel_drag_end(event);
+	if (moved) render_calls_tab();
+}
+
+function on_calls_panel_drag_end(event) {
+	const card = event && event.target ? event.target.closest('.op-calls-card') : null;
+	if (card) card.classList.remove('op-calls-card-dragging');
+	clear_calls_panel_slot_over();
+	document.querySelectorAll('.op-calls-card-dragging').forEach(el => el.classList.remove('op-calls-card-dragging'));
+	const layout = document.querySelector('.op-calls-layout');
+	if (layout) layout.classList.remove('op-calls-layout-dragging');
+	dragged_calls_panel_view = '';
+	/* Remove the document-level highlight listener added in on_calls_panel_drag_start */
+	if (_op_calls_doc_drag_handler) {
+		document.removeEventListener('dragover', _op_calls_doc_drag_handler);
+		_op_calls_doc_drag_handler = null;
+	}
+	_op_calls_slot_rects = [];
+	_op_calls_highlighted_slot = null;
+	/* Fire any render that was deferred while we were dragging */
+	if (_op_calls_render_deferred) {
+		_op_calls_render_deferred = false;
+		render_calls_tab();
+	}
+}
+
 /**
  * Called on dragstart of a call row; stores the dragged UUID.
  * @param {string} uuid