From 39e49a40cb8644545d5b2ce3502fc3d25ebc0d35 Mon Sep 17 00:00:00 2001
From: mukeshs <mukesh@rootxwire.com>
Date: Tue, 12 May 2026 12:31:49 +0530
Subject: [PATCH] Professor reorder

---
 support-portal-frontend/angular.json          |   11 +-
 .../professor/professor.component.css         | 1552 +++--------------
 2 files changed, 232 insertions(+), 1331 deletions(-)

diff --git a/support-portal-frontend/angular.json b/support-portal-frontend/angular.json
index a1a263e..b65c832 100644
--- a/support-portal-frontend/angular.json
+++ b/support-portal-frontend/angular.json
@@ -31,14 +31,9 @@
             ],
             "styles": [
               "src/styles.css"
-
-            
-         
-
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
-            
             ]
           },
           "configurations": {
@@ -51,8 +46,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "15kb"
+                  "maximumWarning": "10kb",
+                  "maximumError": "20kb"
                 }
               ],
               "fileReplacements": [
@@ -138,4 +133,4 @@
     }
   },
   "defaultProject": "support-portal-frontend"
-}
+}
\ No newline at end of file
diff --git a/support-portal-frontend/src/app/component/professor/professor.component.css b/support-portal-frontend/src/app/component/professor/professor.component.css
index f23238c..71c9ead 100644
--- a/support-portal-frontend/src/app/component/professor/professor.component.css
+++ b/support-portal-frontend/src/app/component/professor/professor.component.css
@@ -1,1324 +1,230 @@
-/* Professor Layout */
-.professor-layout {
-  display: flex;
-  min-height: 100vh;
-  background: #f8f9fa;
-}
-
-.sidebar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100vh;
-  width: 260px;
-  z-index: 1000;
-}
-
-.professor-content {
-  margin-left: 260px;
-  flex: 1;
-  padding: 32px;
-  width: calc(100% - 260px);
-  max-width: 1600px;
-}
-.form-textarea:disabled,
-.form-input:disabled {
-  background: #f3f4f6;
-  color: #9ca3af;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.form-text {
-  font-size: 12px;
-  margin-top: 4px;
-  display: block;
-}
-
-.text-muted {
-  color: #6b7280;
-  font-style: italic;
-}
-
-/* Header Section */
-.professor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32px;
-  gap: 20px;
-}
-
-.header-left {
-  flex: 1;
-}
-
-.page-title {
-  font-size: 28px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin: 0 0 4px 0;
-  letter-spacing: -0.5px;
-}
-
-.page-subtitle {
-  font-size: 14px;
-  color: #6b7280;
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-/* Search Box */
-.search-box {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.search-box i {
-  position: absolute;
-  left: 16px;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.search-input {
-  padding: 10px 16px 10px 42px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 14px;
-  color: #1a1a1a;
-  width: 300px;
-  transition: all 0.2s ease;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.search-input::placeholder {
-  color: #9ca3af;
-}
-
-/* Buttons */
-.btn-primary,
-.btn-secondary,
-.btn-refresh {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-}
-
-.btn-primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #2563eb;
-  transform: translateY(-1px);
-}
-
-.btn-primary:disabled {
-  background: #9ca3af;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.btn-secondary {
-  background: white;
-  color: #374151;
-  border: 1px solid #e5e7eb;
-}
-
-.btn-secondary:hover {
-  background: #f9fafb;
-  border-color: #d1d5db;
-}
-
-.btn-refresh {
-  background: white;
-  color: #6b7280;
-  border: 1px solid #e5e7eb;
-  padding: 10px 16px;
-}
-
-.btn-refresh:hover {
-  background: #f9fafb;
-  color: #3b82f6;
-}
-
-/* ─── Reorder toolbar buttons ──────────────────────────────────────────────── */
-
-.btn-reorder {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid #d1d5db;
-  background: white;
-  color: #374151;
-}
-
-.btn-reorder:hover {
-  background: #f0f9ff;
-  border-color: #3b82f6;
-  color: #3b82f6;
-}
-
-.btn-save-order {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: none;
-  background: #16a34a;
-  color: white;
-}
-
-.btn-save-order:hover:not(:disabled) {
-  background: #15803d;
-  transform: translateY(-1px);
-}
-
-.btn-save-order:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btn-cancel-reorder {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 1px solid #d1d5db;
-  background: white;
-  color: #6b7280;
-}
-
-.btn-cancel-reorder:hover:not(:disabled) {
-  background: #fef2f2;
-  border-color: #dc2626;
-  color: #dc2626;
-}
-
-.btn-cancel-reorder:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Instructional hint badge shown while in reorder mode */
-.reorder-hint-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 14px;
-  background: #eff6ff;
-  color: #1d4ed8;
-  border: 1px solid #bfdbfe;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-/* Tiny spinner inside Save button */
-.spinner-sm {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(255, 255, 255, 0.4);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Table Container */
-.table-container {
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.table-wrapper {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.professors-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.professors-table thead {
-  background: #f9fafb;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.professors-table thead th {
-  padding: 16px 20px;
-  text-align: left;
-  font-size: 13px;
-  font-weight: 600;
-  color: #374151;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* Compact header columns for drag handle and order number */
-.professors-table thead th.th-handle,
-.professors-table thead th.th-order {
-  padding: 16px 8px;
-  width: auto;
-}
-
-.professors-table tbody tr {
-  border-bottom: 1px solid #f3f4f6;
-  transition: background 0.15s ease;
-  cursor: pointer;
-}
-
-.professors-table tbody tr:last-child {
-  border-bottom: none;
-}
-
-.professors-table tbody tr:hover {
-  background: #f9fafb;
-}
-
-.professors-table tbody td {
-  padding: 16px 20px;
-  font-size: 14px;
-  color: #374151;
-  vertical-align: middle;
-}
-
-/* ─── Table in reorder mode ────────────────────────────────────────────────── */
-
-/* Subtle amber top-border to signal reorder mode */
-.professors-table.reorder-active {
-  border-top: 3px solid #f59e0b;
-}
-
-/* All rows become draggable */
-tr.reorder-row {
-  cursor: grab;
-  user-select: none;
-  transition: background-color 0.15s ease, opacity 0.15s ease;
-}
-
-tr.reorder-row:active {
-  cursor: grabbing;
-}
-
-/* Row being dragged — ghost placeholder */
-tr.row-dragging {
-  opacity: 0.35;
-  background-color: #fef9c3 !important;
-  outline: 2px dashed #f59e0b;
-}
-
-/* Row that is the current drop target */
-tr.row-drag-over {
-  background-color: #dbeafe !important;
-  border-top: 3px solid #3b82f6 !important;
-}
-
-/* Drag-handle cell */
-.drag-handle-cell {
-  width: 28px;
-  padding: 0 6px !important;
-  text-align: center;
-  color: #9ca3af;
-}
-
-.drag-handle-icon {
-  font-size: 1.1rem;
-  cursor: grab;
-  transition: color 0.15s ease;
-}
-
-.drag-handle-icon:hover {
-  color: #374151;
-}
-
-/* Position-number cell */
-.order-number-cell {
-  width: 36px;
-  padding: 0 8px !important;
-  text-align: center;
-}
-
-.order-badge {
-  display: inline-block;
-  min-width: 24px;
-  padding: 3px 7px;
-  background: #f3f4f6;
-  color: #6b7280;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 700;
-  text-align: center;
-}
-
-/* Dim action buttons while in reorder mode */
-.actions-disabled {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-/* Display order indicator in the view modal badges row */
-.order-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 10px;
-  background: #f3f4f6;
-  color: #6b7280;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* Professor Avatar */
-.professor-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  overflow: hidden;
-  border: 2px solid #e5e7eb;
-}
-
-.professor-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* Professor Info Cells */
-.professor-id {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  color: #6b7280;
-  background: #f3f4f6;
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-
-.professor-name-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.professor-name-cell .full-name {
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.specialty-text {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.email-text {
-  color: #6b7280;
-  font-size: 13px;
-}
-
-.department-text {
-  color: #6b7280;
-  font-size: 13px;
-}
-
-/* Category Badge */
-.category-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.badge-faculty   { background: #dbeafe; color: #1e40af; }
-.badge-support   { background: #e0e7ff; color: #3730a3; }
-.badge-trainee   { background: #fef3c7; color: #92400e; }
-.badge-resigned  { background: #f3f4f6; color: #374151; }
-.badge-guides    { background: #dbeafe; color: #1e3a8a; }
-.badge-friends   { background: #dcfce7; color: #14532d; }
-.badge-patrons   { background: #fae8ff; color: #6b21a8; }
-
-/* Status Badge */
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.status-active   { background: #d1fae5; color: #065f46; }
-.status-leave    { background: #fef3c7; color: #92400e; }
-.status-retired  { background: #fee2e2; color: #991b1b; }
-.status-inactive { background: #f3f4f6; color: #6b7280; }
-
-/* Action Buttons */
-.action-buttons {
-  display: flex;
-  gap: 8px;
-}
-
-.btn-action {
-  width: 36px;
-  height: 36px;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
-  background: white;
-  color: #6b7280;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.btn-action:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.btn-edit:hover {
-  background: #eff6ff;
-  border-color: #3b82f6;
-  color: #3b82f6;
-}
-
-.btn-delete:hover {
-  background: #fef2f2;
-  border-color: #dc2626;
-  color: #dc2626;
-}
-
-/* Empty State */
-.empty-state {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 60px 20px;
-  text-align: center;
-}
-
-.empty-icon {
-  width: 80px;
-  height: 80px;
-  margin: 0 auto 20px;
-  background: #f3f4f6;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-icon i {
-  font-size: 36px;
-  color: #9ca3af;
-}
-
-.empty-state h3 {
-  font-size: 20px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin: 0 0 8px 0;
-}
-
-.empty-state p {
-  font-size: 14px;
-  color: #6b7280;
-  margin: 0;
-}
-
-/* Loading State */
-.loading-state {
-  padding: 60px 20px;
-  text-align: center;
-  color: #6b7280;
-}
-
-.spinner-border-lg {
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  border: 4px solid #e5e7eb;
-  border-top-color: #3b82f6;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-  margin-bottom: 12px;
-}
-
-/* Modal Styles */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 2000;
-  animation: fadeIn 0.2s ease;
-}
-
-.modal-overlay.show {
-  display: flex;
-}
-
-.modal-container {
-  background: white;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 600px;
-  max-height: 90vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  animation: slideUp 0.3s ease;
-}
-
-@keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 24px 32px;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.modal-close {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  border: none;
-  background: #f3f4f6;
-  color: #6b7280;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.modal-close:hover {
-  background: #e5e7eb;
-  color: #1a1a1a;
-}
-
-.modal-body {
-  padding: 24px 32px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 20px 32px;
-  border-top: 1px solid #e5e7eb;
-}
-
-/* Professor Detail Card */
-.professor-detail-card {
-  background: #f9fafb;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.professor-detail-header {
-  display: flex;
-  gap: 20px;
-  padding: 24px;
-  background: white;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.professor-detail-avatar {
-  width: 80px;
-  height: 80px;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 2px solid #e5e7eb;
-  flex-shrink: 0;
-}
-
-.professor-detail-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.professor-detail-info {
-  flex: 1;
-}
-
-.professor-detail-info h4 {
-  margin: 0 0 4px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.professor-detail-info .email {
-  margin: 0 0 12px 0;
-  font-size: 14px;
-  color: #6b7280;
-}
-
-.badges-row {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 12px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.info-item i {
-  width: 16px;
-  color: #9ca3af;
-}
-
-/* Professor Detail Body */
-.professor-detail-body {
-  padding: 24px;
-}
-
-.detail-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 24px;
-  margin-bottom: 24px;
-}
-
-.detail-col {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 0;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.detail-item:last-child {
-  border-bottom: none;
-}
-
-.detail-item i {
-  width: 20px;
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.detail-label {
-  font-weight: 500;
-  color: #6b7280;
-  font-size: 13px;
-  min-width: 80px;
-}
-
-.detail-value {
-  color: #1a1a1a;
-  font-size: 14px;
-}
-
-/* Form Styles */
-.form-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 20px;
-}
-
-.form-group label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 8px;
-}
-
-.form-group label i {
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.form-group label small {
-  font-weight: 400;
-  color: #6b7280;
-}
-
-.form-input,
-.form-select {
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 14px;
-  color: #1a1a1a;
-  transition: all 0.2s ease;
-  background: white;
-  font-family: inherit;
-}
-
-.form-input:focus,
-.form-select:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.form-input:disabled,
-.form-select:disabled {
-  background: #f3f4f6;
-  color: #9ca3af;
-  cursor: not-allowed;
-}
-
-.form-input::placeholder {
-  color: #9ca3af;
-}
-
-.form-textarea {
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 14px;
-  color: #1a1a1a;
-  transition: all 0.2s ease;
-  background: white;
-  font-family: inherit;
-  resize: vertical;
-}
-
-.form-textarea:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-/* File Upload */
-.file-upload-wrapper {
-  position: relative;
-}
-
-.file-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.file-label {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border: 2px dashed #d1d5db;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: #fafafa;
-}
-
-.file-label:hover {
-  border-color: #3b82f6;
-  background: #f0f9ff;
-}
-
-.file-label.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.file-label i {
-  font-size: 20px;
-  color: #6b7280;
-}
-
-.file-label span {
-  font-size: 14px;
-  color: #374151;
-}
-
-/* Form Section */
-.form-section {
-  margin: 24px 0;
-  padding: 20px;
-  background: #f9fafb;
-  border-radius: 8px;
-}
-
-/* Checkbox */
-.checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.checkbox-wrapper:last-child {
-  margin-bottom: 0;
-}
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.checkbox-custom {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #d1d5db;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  background: white;
-}
-
-.checkbox-input:checked + .checkbox-label .checkbox-custom {
-  background: #3b82f6;
-  border-color: #3b82f6;
-}
-
-.checkbox-input:checked + .checkbox-label .checkbox-custom::after {
-  content: '\f00c';
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-  color: white;
-  font-size: 12px;
-}
-
-.checkbox-input:disabled + .checkbox-label {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.checkbox-text {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #374151;
-}
-
-.checkbox-text i {
-  color: #6b7280;
-  font-size: 14px;
-}
-
-.checkbox-text small {
-  font-weight: 400;
-  color: #6b7280;
-}
-
-/* Section Title */
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin: 0 0 20px 0;
-}
-
-/* Detail Section */
-.detail-section {
-  margin-bottom: 24px;
-}
-
-.detail-section:last-child {
-  margin-bottom: 0;
-}
-
-.detail-section h5 {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin: 0 0 8px 0;
-}
-
-.detail-section p {
-  font-size: 14px;
-  color: #6b7280;
-  margin: 0;
-  line-height: 1.6;
-}
-
-/* Work Days */
-.work-days-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 12px;
-}
-
-.work-days-label i {
-  color: #6b7280;
-}
-
-.work-days-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 12px;
-}
-
-.work-days-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.day-badge {
-  padding: 6px 12px;
-  background: #3b82f6;
-  color: white;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* Awards Section */
-.awards-manager {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.award-item {
-  background: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.award-fields {
-  display: grid;
-  grid-template-columns: 1fr 100px 2fr 40px;
-  gap: 12px;
-  align-items: start;
-}
-
-.form-group-wide {
-  grid-column: span 1;
-}
-
-.btn-remove-award {
-  width: 36px;
-  height: 36px;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
-  background: white;
-  color: #dc2626;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.btn-remove-award:hover {
-  background: #fef2f2;
-  border-color: #dc2626;
-  transform: translateY(-2px);
-}
-
-.btn-add-award {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: 2px dashed #d1d5db;
-  border-radius: 8px;
-  background: white;
-  color: #3b82f6;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.btn-add-award:hover {
-  border-color: #3b82f6;
-  background: #f0f9ff;
-}
-
-/* Awards Grid (View Mode) */
-.awards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 16px;
-}
-
-.award-card {
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.award-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  margin-bottom: 8px;
-}
-
-.award-header h6 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.award-year {
-  padding: 4px 8px;
-  background: #f3f4f6;
-  color: #6b7280;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.award-description {
-  font-size: 13px;
-  color: #6b7280;
-  margin: 0;
-  line-height: 1.5;
-}
-
-/* Responsive Design */
-@media (max-width: 992px) {
-  .professor-content {
-    margin-left: 0;
-    width: 100%;
-    padding: 24px;
-  }
-
-  .sidebar {
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-  }
-
-  .sidebar.open {
-    transform: translateX(0);
-  }
-
-  .professor-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .header-actions {
-    width: 100%;
-  }
-
-  .search-input {
-    width: 100%;
-  }
-
-  .award-fields {
-    grid-template-columns: 1fr;
-  }
-
-  .btn-remove-award {
-    justify-self: start;
-  }
-}
-
-@media (max-width: 768px) {
-  .professor-content {
-    padding: 20px;
-  }
-
-  .page-title {
-    font-size: 24px;
-  }
-
-  .table-wrapper {
-    overflow-x: auto;
-  }
-
-  .professors-table {
-    min-width: 900px;
-  }
-
-  .modal-container {
-    width: 95%;
-  }
-
-  .modal-header,
-  .modal-body,
-  .modal-footer {
-    padding: 20px;
-  }
-
-  .form-row {
-    grid-template-columns: 1fr;
-  }
-
-  .work-days-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .awards-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .detail-row {
-    grid-template-columns: 1fr;
-  }
-
-  .reorder-hint-badge {
-    font-size: 12px;
-    padding: 6px 10px;
-  }
-}
-
-@media (max-width: 576px) {
-  .professor-content {
-    padding: 16px;
-  }
-
-  .header-actions {
-    flex-direction: column;
-  }
-
-  .header-actions > * {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .professor-detail-header {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .professor-detail-avatar {
-    margin: 0 auto;
-  }
-}
-
-/* Print Styles */
-@media print {
-  .sidebar,
-  .header-actions,
-  .action-buttons,
-  .btn-remove-award,
-  .btn-add-award {
-    display: none;
-  }
-
-  .professor-content {
-    margin-left: 0;
-    width: 100%;
-  }
+/* Layout */
+.professor-layout{display:flex;min-height:100vh;background:#f8f9fa}
+.sidebar{position:fixed;left:0;top:0;height:100vh;width:260px;z-index:1000}
+.professor-content{margin-left:260px;flex:1;padding:32px;width:calc(100% - 260px);max-width:1600px}
+
+/* Disabled inputs */
+.form-textarea:disabled,.form-input:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed;opacity:.7}
+.form-text{font-size:12px;margin-top:4px;display:block}
+.text-muted{color:#6b7280;font-style:italic}
+
+/* Header */
+.professor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;gap:20px}
+.header-left{flex:1}
+.page-title{font-size:28px;font-weight:600;color:#1a1a1a;margin:0 0 4px;letter-spacing:-.5px}
+.page-subtitle{font-size:14px;color:#6b7280;margin:0}
+.header-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
+
+/* Search */
+.search-box{position:relative;display:flex;align-items:center}
+.search-box i{position:absolute;left:16px;color:#6b7280;font-size:14px}
+.search-input{padding:10px 16px 10px 42px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#1a1a1a;width:300px;transition:all .2s}
+.search-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
+.search-input::placeholder{color:#9ca3af}
+
+/* Buttons — shared shape */
+.btn-primary,.btn-secondary,.btn-refresh,.btn-reorder,.btn-save-order,.btn-cancel-reorder{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none}
+.btn-primary{background:#3b82f6;color:#fff}
+.btn-primary:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}
+.btn-primary:disabled{background:#9ca3af;cursor:not-allowed;opacity:.6}
+.btn-secondary{background:#fff;color:#374151;border:1px solid #e5e7eb}
+.btn-secondary:hover{background:#f9fafb;border-color:#d1d5db}
+.btn-refresh{background:#fff;color:#6b7280;border:1px solid #e5e7eb;padding:10px 16px}
+.btn-refresh:hover{background:#f9fafb;color:#3b82f6}
+.btn-reorder{background:#fff;color:#374151;border:1px solid #d1d5db}
+.btn-reorder:hover{background:#f0f9ff;border-color:#3b82f6;color:#3b82f6}
+.btn-save-order{background:#16a34a;color:#fff}
+.btn-save-order:hover:not(:disabled){background:#15803d;transform:translateY(-1px)}
+.btn-save-order:disabled{opacity:.6;cursor:not-allowed}
+.btn-cancel-reorder{background:#fff;color:#6b7280;border:1px solid #d1d5db}
+.btn-cancel-reorder:hover:not(:disabled){background:#fef2f2;border-color:#dc2626;color:#dc2626}
+.btn-cancel-reorder:disabled{opacity:.5;cursor:not-allowed}
+
+/* Reorder hint + spinner */
+.reorder-hint-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:8px;font-size:13px;font-weight:500}
+.spinner-sm{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+/* Table */
+.table-container{animation:fadeIn .3s ease}
+@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.table-wrapper{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
+.professors-table{width:100%;border-collapse:collapse}
+.professors-table thead{background:#f9fafb;border-bottom:1px solid #e5e7eb}
+.professors-table thead th{padding:16px 20px;text-align:left;font-size:13px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.5px}
+.professors-table thead th.th-handle,.professors-table thead th.th-order{padding:16px 8px;width:auto}
+.professors-table tbody tr{border-bottom:1px solid #f3f4f6;transition:background .2s;cursor:pointer}
+.professors-table tbody tr:last-child{border-bottom:none}
+.professors-table tbody tr:hover{background:#f9fafb}
+.professors-table tbody td{padding:16px 20px;font-size:14px;color:#374151;vertical-align:middle}
+
+/* Reorder drag states */
+.professors-table.reorder-active{border-top:3px solid #f59e0b}
+tr.reorder-row{cursor:grab;user-select:none;transition:background-color .15s,opacity .15s}
+tr.reorder-row:active{cursor:grabbing}
+tr.row-dragging{opacity:.35;background:#fef9c3 !important;outline:2px dashed #f59e0b}
+tr.row-drag-over{background:#dbeafe !important;border-top:3px solid #3b82f6 !important}
+.drag-handle-cell{width:28px;padding:0 6px !important;text-align:center;color:#9ca3af}
+.drag-handle-icon{font-size:1.1rem;cursor:grab;transition:color .15s}
+.drag-handle-icon:hover{color:#374151}
+.order-number-cell{width:36px;padding:0 8px !important;text-align:center}
+.order-badge{display:inline-block;min-width:24px;padding:3px 7px;background:#f3f4f6;color:#6b7280;border-radius:4px;font-size:12px;font-weight:700;text-align:center}
+.actions-disabled{opacity:.3;pointer-events:none}
+.order-indicator{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:#f3f4f6;color:#6b7280;border-radius:6px;font-size:12px;font-weight:600}
+
+/* Avatar */
+.professor-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #e5e7eb}
+.professor-avatar img{width:100%;height:100%;object-fit:cover}
+
+/* Cell text */
+.professor-id{font-family:'Courier New',monospace;font-size:12px;color:#6b7280;background:#f3f4f6;padding:4px 8px;border-radius:4px}
+.professor-name-cell{display:flex;flex-direction:column;gap:2px}
+.professor-name-cell .full-name{font-weight:600;color:#1a1a1a}
+.specialty-text{font-size:12px;color:#6b7280}
+.email-text,.department-text{font-size:13px;color:#6b7280}
+
+/* Category badges */
+.category-badge{display:inline-block;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:600}
+.badge-faculty{background:#dbeafe;color:#1e40af}
+.badge-support{background:#e0e7ff;color:#3730a3}
+.badge-trainee{background:#fef3c7;color:#92400e}
+.badge-resigned{background:#f3f4f6;color:#374151}
+.badge-guides{background:#dbeafe;color:#1e3a8a}
+.badge-friends{background:#dcfce7;color:#14532d}
+.badge-patrons{background:#fae8ff;color:#6b21a8}
+
+/* Status badges */
+.status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600}
+.status-active{background:#d1fae5;color:#065f46}
+.status-leave{background:#fef3c7;color:#92400e}
+.status-retired{background:#fee2e2;color:#991b1b}
+.status-inactive{background:#f3f4f6;color:#6b7280}
+
+/* Action buttons */
+.action-buttons{display:flex;gap:8px}
+.btn-action{width:36px;height:36px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
+.btn-action:hover{transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,.1)}
+.btn-edit:hover{background:#eff6ff;border-color:#3b82f6;color:#3b82f6}
+.btn-delete:hover{background:#fef2f2;border-color:#dc2626;color:#dc2626}
+
+/* Empty / loading */
+.empty-state{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:60px 20px;text-align:center}
+.empty-icon{width:80px;height:80px;margin:0 auto 20px;background:#f3f4f6;border-radius:50%;display:flex;align-items:center;justify-content:center}
+.empty-icon i{font-size:36px;color:#9ca3af}
+.empty-state h3{font-size:20px;font-weight:600;color:#1a1a1a;margin:0 0 8px}
+.empty-state p{font-size:14px;color:#6b7280;margin:0}
+.loading-state{padding:60px 20px;text-align:center;color:#6b7280}
+.spinner-border-lg{display:inline-block;width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}
+
+/* Modal — only content overrides; Bootstrap handles the shell */
+.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid #e5e7eb}
+.modal-header h3{margin:0;font-size:18px;font-weight:600;color:#1a1a1a}
+.modal-close{width:32px;height:32px;border-radius:6px;border:none;background:#f3f4f6;color:#6b7280;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
+.modal-close:hover{background:#e5e7eb;color:#1a1a1a}
+.modal-body{padding:24px 32px;overflow-y:auto;flex:1}
+.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 32px;border-top:1px solid #e5e7eb}
+
+/* Professor detail card */
+.professor-detail-card{background:#f9fafb;border-radius:8px;overflow:hidden}
+.professor-detail-header{display:flex;gap:20px;padding:24px;background:#fff;border-bottom:1px solid #e5e7eb}
+.professor-detail-avatar{width:80px;height:80px;border-radius:12px;overflow:hidden;border:2px solid #e5e7eb;flex-shrink:0}
+.professor-detail-avatar img{width:100%;height:100%;object-fit:cover}
+.professor-detail-info{flex:1}
+.professor-detail-info h4{margin:0 0 4px;font-size:18px;font-weight:600;color:#1a1a1a}
+.professor-detail-info .email{margin:0 0 12px;font-size:14px;color:#6b7280}
+.badges-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
+.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:12px}
+.info-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7280}
+.professor-detail-body{padding:24px}
+.detail-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:24px}
+.detail-col{display:flex;flex-direction:column;gap:12px}
+.detail-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #e5e7eb}
+.detail-item:last-child{border-bottom:none}
+.detail-label{font-weight:500;color:#6b7280;font-size:13px;min-width:80px}
+.detail-value{color:#1a1a1a;font-size:14px}
+
+/* Forms */
+.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:20px}
+.form-group{display:flex;flex-direction:column;margin-bottom:20px}
+.form-group label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:8px}
+.form-group label i{color:#6b7280;font-size:14px}
+.form-input,.form-select,.form-textarea{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#1a1a1a;transition:all .2s;background:#fff;font-family:inherit}
+.form-textarea{resize:vertical}
+.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
+.form-input:disabled,.form-select:disabled,.form-textarea:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}
+.form-input::placeholder,.form-textarea::placeholder{color:#9ca3af}
+.file-upload-wrapper{position:relative}
+.file-input{position:absolute;opacity:0;width:0;height:0}
+.file-label{display:flex;align-items:center;gap:12px;padding:12px 16px;border:2px dashed #d1d5db;border-radius:8px;cursor:pointer;transition:all .2s;background:#fafafa}
+.file-label:hover{border-color:#3b82f6;background:#f0f9ff}
+.file-label.disabled{opacity:.5;cursor:not-allowed}
+.form-section{margin:24px 0;padding:20px;background:#f9fafb;border-radius:8px}
+.section-title{font-size:16px;font-weight:600;color:#1a1a1a;margin:0 0 20px}
+
+/* Checkboxes */
+.checkbox-wrapper{display:flex;align-items:center;margin-bottom:12px}
+.checkbox-wrapper:last-child{margin-bottom:0}
+.checkbox-input{position:absolute;opacity:0;width:0;height:0}
+.checkbox-label{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
+.checkbox-custom{width:20px;height:20px;border:2px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s;background:#fff}
+.checkbox-input:checked+.checkbox-label .checkbox-custom{background:#3b82f6;border-color:#3b82f6}
+.checkbox-input:checked+.checkbox-label .checkbox-custom::after{content:'\f00c';font-family:'Font Awesome 5 Free';font-weight:900;color:#fff;font-size:12px}
+.checkbox-input:disabled+.checkbox-label{opacity:.5;cursor:not-allowed}
+
+/* Detail sections */
+.detail-section{margin-bottom:24px}
+.detail-section:last-child{margin-bottom:0}
+.detail-section h5{font-size:14px;font-weight:600;color:#1a1a1a;margin:0 0 8px}
+.detail-section p{font-size:14px;color:#6b7280;margin:0;line-height:1.6}
+
+/* Work days */
+.work-days-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px}
+.work-days-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
+.work-days-list{display:flex;flex-wrap:wrap;gap:8px}
+.day-badge{padding:6px 12px;background:#3b82f6;color:#fff;border-radius:6px;font-size:12px;font-weight:600}
+
+/* Awards / skills */
+.awards-manager{display:flex;flex-direction:column;gap:16px}
+.award-item{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:16px}
+.award-fields{display:grid;grid-template-columns:1fr 100px 2fr 40px;gap:12px;align-items:start}
+.btn-remove-award{width:36px;height:36px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;color:#dc2626;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
+.btn-remove-award:hover{background:#fef2f2;border-color:#dc2626;transform:translateY(-2px)}
+.btn-add-award{display:flex;align-items:center;gap:8px;padding:10px 16px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#3b82f6;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
+.btn-add-award:hover{border-color:#3b82f6;background:#f0f9ff}
+.awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
+.award-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:16px}
+.award-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:8px}
+.award-header h6{margin:0;font-size:14px;font-weight:600;color:#1a1a1a}
+
+/* Responsive */
+@media(max-width:992px){
+  .professor-content{margin-left:0;width:100%;padding:24px}
+  .sidebar{transform:translateX(-100%);transition:transform .3s}
+  .sidebar.open{transform:translateX(0)}
+  .professor-header{flex-direction:column;align-items:flex-start}
+  .header-actions{width:100%}
+  .search-input{width:100%}
+  .award-fields{grid-template-columns:1fr}
+  .btn-remove-award{justify-self:start}
+}
+@media(max-width:768px){
+  .professor-content{padding:20px}
+  .page-title{font-size:24px}
+  .table-wrapper{overflow-x:auto}
+  .professors-table{min-width:900px}
+  .modal-header,.modal-body,.modal-footer{padding:20px}
+  .form-row,.detail-row{grid-template-columns:1fr}
+  .work-days-grid,.awards-grid{grid-template-columns:1fr}
+  .reorder-hint-badge{font-size:12px;padding:6px 10px}
+}
+@media(max-width:576px){
+  .professor-content{padding:16px}
+  .header-actions{flex-direction:column}
+  .header-actions>*{width:100%;justify-content:center}
+  .professor-detail-header{flex-direction:column;text-align:center}
+  .professor-detail-avatar{margin:0 auto}
+}
+@media print{
+  .sidebar,.header-actions,.action-buttons,.btn-remove-award,.btn-add-award{display:none}
+  .professor-content{margin-left:0;width:100%}
 }
\ No newline at end of file