/* ═══════════════════════════════════════════════════════════════
   SolvixHCM — Custom Stylesheet
   Tech Vision Solvix (Pvt.) Ltd.
   Extends the Sneat Bootstrap 5 theme (vendor CSS handles layout)
   ═══════════════════════════════════════════════════════════════ */

/* ── Brand Color Overrides ──────────────────────────────────── */
:root {
  --bs-primary: #1B2A4A;
  --bs-primary-rgb: 27, 42, 74;
  --bs-primary-text-emphasis: #0e1525;
  --bs-primary-bg-subtle: #d1d5db;
  --bs-primary-border-subtle: #a3aab8;
  --bs-secondary: #5BC0CE;
  --bs-secondary-rgb: 91, 192, 206;
  --bs-secondary-text-emphasis: #244d53;
  --bs-secondary-bg-subtle: #def3f5;
  --bs-secondary-border-subtle: #bde6ec;
  --bs-link-color: #1B2A4A;
  --bs-link-color-rgb: 27, 42, 74;
  --bs-link-hover-color: #121c32;
  --bs-link-hover-color-rgb: 18, 28, 50;
}
.bg-primary, .btn-primary {
  background-color: #1B2A4A !important;
  border-color: #1B2A4A !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #121c32 !important;
  border-color: #121c32 !important;
}
.btn-outline-primary {
  color: #1B2A4A !important;
  border-color: #1B2A4A !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: #1B2A4A !important;
  border-color: #1B2A4A !important;
  color: #fff !important;
}
.text-primary { color: #1B2A4A !important; }
.bg-label-primary {
  background-color: rgba(27, 42, 74, 0.16) !important;
  color: #1B2A4A !important;
}
.badge.bg-primary { background-color: #1B2A4A !important; }
.page-item.active .page-link {
  background-color: #1B2A4A;
  border-color: #1B2A4A;
}
.form-check-input:checked {
  background-color: #1B2A4A;
  border-color: #1B2A4A;
}
.nav-pills .nav-link.active {
  background-color: #1B2A4A !important;
}

/* Secondary color */
.bg-secondary, .btn-secondary {
  background-color: #5BC0CE !important;
  border-color: #5BC0CE !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: #49a8b5 !important;
  border-color: #49a8b5 !important;
}
.text-secondary { color: #5BC0CE !important; }
.bg-label-secondary {
  background-color: rgba(91, 192, 206, 0.16) !important;
  color: #3a97a3 !important;
}
.btn-outline-secondary {
  color: #5BC0CE !important;
  border-color: #5BC0CE !important;
}
.btn-outline-secondary:hover {
  background-color: #5BC0CE !important;
  color: #fff !important;
}

/* Sidebar menu text — ensure readable contrast on white bg */
.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next {
  color: #596d83 !important;
}
.bg-menu-theme .menu-link .menu-icon {
  color: #596d83 !important;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background-color: rgba(27, 42, 74, 0.08) !important;
  color: #1B2A4A !important;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link i {
  color: #1B2A4A !important;
}
.bg-menu-theme .menu-inner > .menu-item > .menu-link:hover {
  background-color: rgba(27, 42, 74, 0.08) !important;
  color: #1B2A4A !important;
}
.bg-menu-theme .menu-inner > .menu-item > .menu-link:hover .menu-icon {
  color: #1B2A4A !important;
}

/* Form focus */
.form-control:focus, .form-select:focus {
  border-color: #1B2A4A !important;
}
.form-switch .form-check-input:checked {
  background-color: #1B2A4A;
  border-color: #1B2A4A;
}

/* ── Utility Helpers ─────────────────────────────────────────── */
.fw-600 { font-weight: 600; }
.cursor-pointer { cursor: pointer; }
.transition-all { transition: all 0.2s ease; }
.progress-xs { height: 4px; }
.progress-sm { height: 6px; }

/* ── Stat Icon (Dashboard KPI cards) ────────────────────────── */
.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

/* ── Card Hover Effect ───────────────────────────────────────── */
.card-hover {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}
.card-hover:hover {
  box-shadow: 0 6px 24px rgba(27, 42, 74, 0.18);
  transform: translateY(-2px);
}

/* ── Notification Badge ──────────────────────────────────────── */
.badge-notifications {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.6rem;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  line-height: 16px;
}

/* ── DataTable Wrapper ───────────────────────────────────────── */
.card .dataTables_wrapper {
  padding: 1rem 1.25rem;
}
.dataTables_wrapper .row:first-child {
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dataTables_wrapper .row:last-child {
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.dataTables_wrapper .dataTables_length {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #697a8d;
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_length select {
  width: auto;
  display: inline-block;
  padding: 0.3rem 2rem 0.3rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
}
.dataTables_wrapper .dataTables_filter {
  text-align: right;
}
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #697a8d;
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter input {
  width: 200px;
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
}
.dataTables_wrapper .dataTables_info {
  font-size: 0.8125rem;
  color: #697a8d;
  padding-top: 0;
}
.dataTables_wrapper .dataTables_paginate {
  text-align: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.25rem 0.65rem !important;
  font-size: 0.8125rem;
  border-radius: 0.375rem !important;
  margin-left: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #1B2A4A !important;
  border-color: #1B2A4A !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: #d1d5db !important;
  border-color: #d1d5db !important;
  color: #1B2A4A !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: #c0c0c0 !important;
}

/* DataTable Export Buttons */
.dt-buttons {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.dt-buttons .btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── Table Enhancements ──────────────────────────────────────── */
.table > thead > tr > th {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #566a7f;
  white-space: nowrap;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #e9ecef;
}
.table > tbody > tr > td {
  vertical-align: middle;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #566a7f;
}
.table > tbody > tr:hover { background-color: rgba(27, 42, 74, 0.04); }
.table-sm > tbody > tr > td { font-size: 0.8125rem; }
.table.dataTable thead .sorting::before,
.table.dataTable thead .sorting::after,
.table.dataTable thead .sorting_asc::before,
.table.dataTable thead .sorting_asc::after,
.table.dataTable thead .sorting_desc::before,
.table.dataTable thead .sorting_desc::after {
  opacity: 0.3;
}
.table.dataTable thead .sorting_asc::before,
.table.dataTable thead .sorting_desc::after {
  opacity: 0.8;
}

/* ── Form ────────────────────────────────────────────────────── */
.input-group-text { background: transparent; }
.modal-header { border-bottom: 1px solid rgba(0,0,0,0.08); }

/* ── Profile Photo Preview ───────────────────────────────────── */
#photoPreview { transition: transform 0.2s; }
#photoPreview:hover { transform: scale(1.05); }

/* ── Payslip Print Styles ────────────────────────────────────── */
@media print {
  .layout-menu,
  .layout-navbar,
  .content-footer,
  .no-print,
  .btn { display: none !important; }
  .layout-wrapper,
  .layout-container,
  .layout-page,
  .content-wrapper { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ── Portal Index Page ───────────────────────────────────────── */
.portal-card { transition: transform 0.2s, box-shadow 0.2s; }
.portal-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }

.floating-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-20px); }
}

/* ── Timeline (Employee History) ─────────────────────────────── */
.timeline { list-style: none; padding: 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 16px; top: 0; bottom: 0;
  width: 2px;
  background: #e9ecef;
}
.timeline-item { position: relative; padding-left: 44px; margin-bottom: 16px; }
.timeline-marker {
  position: absolute;
  left: 8px; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1B2A4A;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #1B2A4A;
}

/* ── Kanban Board (Recruitment) ──────────────────────────────── */
.kanban-col { min-width: 280px; max-width: 300px; }
.kanban-card { cursor: grab; transition: box-shadow 0.15s; }
.kanban-card:hover { box-shadow: 0 4px 16px rgba(27,42,74,0.2); }

/* ── Rating Stars ────────────────────────────────────────────── */
.star-rating .star { cursor: pointer; font-size: 1.4rem; color: #d0d0d0; transition: color 0.1s; }
.star-rating .star.active,
.star-rating .star:hover { color: #ffab00; }

/* ── Alert Pulse (Urgent) ────────────────────────────────────── */
@keyframes pulse-border {
  0%, 100% { border-color: rgba(255, 62, 29, 0.4); }
  50%       { border-color: rgba(255, 62, 29, 1); }
}
.border-pulse { animation: pulse-border 2s infinite; border-width: 2px !important; border-style: solid !important; }

/* ── Org Chart ───────────────────────────────────────────────── */
.org-node {
  display: inline-block;
  min-width: 140px;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.org-node:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(27,42,74,0.25); }

/* ── Responsive Mobile ───────────────────────────────────────── */
@media (max-width: 576px) {
  .d-flex.flex-wrap.gap-2 > .btn { flex: 1 1 auto; }
}