/* CSS Document */
/* ============================================================
   employee.css
   Purpose: Styling helpers for employee.php
   CSP-safe: No inline styles required
   ============================================================ */

/* Truncate long text in table cells */
.truncate-cell {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status indicators */
.status-ok {
  color: #198754; /* Bootstrap green */
  font-weight: 600;
}

.status-warn {
  color: #ffc107; /* Bootstrap yellow */
  font-weight: 600;
}

.status-error {
  color: #dc3545; /* Bootstrap red */
  font-weight: 600;
}

.status-critical {
  color: #212529; /* Dark text */
  background-color: #f8d7da; /* Light red background */
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
}

/* Utility spacing (if Bootstrap not available) */
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

/* Fixed widths */
.w-150 { width: 150px; }
.w-250 { width: 250px; }

/* Text alignment */
.text-right { text-align: right; }
.text-center { text-align: center; }

/* Image preview styling */
.image-preview {
  max-width: 200px;
  max-height: 150px;
  display: none; /* hidden until JS sets src */
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Avatar and image helpers */
.avatar-50 {
  width: 50px;
  height: 50px;
}
.rounded-circle {
  border-radius: 50%;
}
.object-cover {
  object-fit: cover;
}
.border-success-2 {
  border: 2px solid #198754;
}

/* Table column helpers */
.actions-col {
  width: 120px;
}

.emp-photo {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 50%;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .emp-photo:hover {
      transform: scale(2); /* zoom to 120x120 */
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      z-index: 10;
      position: relative;
    }
    .table th, .table td {
      vertical-align: middle;
    }