/* ============================================
   Schedule Realtime View - Soft UI Styles
   Modern, translucent design with high-contrast text
   ============================================ */

/* ========================================
   Schedule Toolbar
   ======================================== */

.schedule-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--soft-bg-card, #ffffff);
  border: 1px solid var(--soft-border, #E2E8F0);
  border-radius: 8px;
  margin-bottom: 16px;
}

.schedule-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-toolbar-group.ms-auto {
  margin-left: auto;
}

/* Tools dropdown for secondary controls */
.schedule-tools-dropdown .dropdown-toggle {
  border: 1px solid var(--soft-border, #E2E8F0);
  background: var(--soft-bg, #F8FAFC);
}

.schedule-tools-dropdown .dropdown-toggle:hover {
  background: var(--soft-primary-lt, #E0F2FE);
  border-color: var(--soft-primary, #012554);
}

/* ========================================
   Employee Column
   ======================================== */

.schedule-grid .employee-name {
  min-width: 160px;
  background: var(--soft-bg, #F8FAFC);
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  left: 0;
  z-index: 15;
}

/* ========================================
   Grid Cells - Soft UI
   ======================================== */

.schedule-grid td {
  border-color: var(--soft-border, #E2E8F0);
}

/* Zebra striping with soft colors */
.schedule-grid tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.5);
}

/* Row hover highlight */
.schedule-grid tbody tr:hover {
  background: var(--soft-primary-lt, #E0F2FE);
}

.schedule-grid tbody tr:hover .employee-name {
  background: var(--soft-primary-lt, #E0F2FE);
}

/* ========================================
   Soft UI Shift Badges
   ======================================== */

.shift-item {
  --shift-accent-color: var(--soft-primary, #012554);
  background: var(--soft-bg-card, #ffffff);
  border: 1px solid var(--soft-border, #E2E8F0);
  border-left: 4px solid var(--shift-accent-color);
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  font-size: 0.85rem;
  box-shadow: var(--soft-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.shift-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--soft-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.06));
  border-color: var(--shift-accent-color);
}

.shift-item .location-name {
  font-weight: 600;
  color: var(--tblr-body-color, #1d273b);
  margin-bottom: 2px;
}

.shift-item .time-display {
  font-size: 0.8rem;
  color: var(--soft-secondary-text, #64748B);
}

/* Lunch icon */
.shift-item .lunch-icon {
  font-size: 0.7rem;
  color: var(--soft-secondary-text, #64748B);
  margin-left: 4px;
  opacity: 0.7;
}

/* Shift action buttons */
.shift-item .shift-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  gap: 4px;
}

.shift-item:hover .shift-actions {
  display: flex;
}

.shift-actions button {
  padding: 2px 6px;
  font-size: 0.7rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.shift-actions .btn-edit {
  background: var(--soft-pending-bg, #FEF3C7);
  color: var(--soft-pending-text, #92400E);
}

.shift-actions .btn-edit:hover {
  background: var(--soft-pending-border, #FDE68A);
}

.shift-actions .btn-delete {
  background: var(--soft-denied-bg, #FEE2E2);
  color: var(--soft-denied-text, #991B1B);
}

.shift-actions .btn-delete:hover {
  background: var(--soft-denied-border, #FECACA);
}

/* Overlapping shift warning */
.shift-item.overlapping {
  border: 2px solid var(--soft-denied-text, #991B1B) !important;
  background-color: var(--soft-denied-bg, #FEE2E2) !important;
  position: relative;
  animation: pulse-warning-soft 2s infinite;
}

.shift-item.overlapping::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.9rem;
  z-index: 1;
}

@keyframes pulse-warning-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(153, 27, 27, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.15); }
}

/* Secondary location (different from filtered location) */
.shift-item.secondary-location {
  opacity: 0.45;
}

.shift-item.secondary-location:hover {
  opacity: 0.7;
}

/* ========================================
   Soft UI Time Off Badges
   ======================================== */

.time-off-item {
  padding: 4px 6px;
  margin-bottom: 4px;
  border-radius: 6px;
  font-size: 0.78rem;
  box-shadow: var(--soft-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border: 1px solid transparent;
}

.time-off-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--soft-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.06));
}

/* Approved - Soft green */
.time-off-item.approved {
  background: var(--soft-approved-bg, #D1FAE5) !important;
  border-color: var(--soft-approved-border, #A7F3D0) !important;
  color: var(--soft-approved-text, #065F46) !important;
}

/* Pending - Soft amber */
.time-off-item.pending {
  background: var(--soft-pending-bg, #FEF3C7) !important;
  border-color: var(--soft-pending-border, #FDE68A) !important;
  color: var(--soft-pending-text, #92400E) !important;
}

/* Denied - Soft red */
.time-off-item.denied {
  background: var(--soft-denied-bg, #FEE2E2) !important;
  border-color: var(--soft-denied-border, #FECACA) !important;
  color: var(--soft-denied-text, #991B1B) !important;
}

/* Link icon */
.time-off-item .link-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.time-off-item:hover .link-icon {
  opacity: 0.7;
}

/* Time off action buttons */
.time-off-item .shift-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.time-off-item:hover .shift-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Status badge inside time off */
.time-off-item .status-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.time-off-item.pending .status-badge {
  background: rgba(146, 64, 14, 0.15);
  color: var(--soft-pending-text, #92400E);
}

.time-off-item.denied .status-badge {
  background: rgba(153, 27, 27, 0.15);
  color: var(--soft-denied-text, #991B1B);
}

/* ========================================
   Soft UI Hours Badges
   ======================================== */

.employee-hours {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  clear: both;
  width: 100%;
}

.employee-hours .hours-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
  cursor: help;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.employee-hours .hours-badge:hover {
  transform: translateY(-1px);
}

/* Scheduled hours - Soft indigo */
.employee-hours .hours-badge.scheduled {
  background: var(--soft-scheduled-bg, #E0E7FF);
  color: var(--soft-scheduled-text, #3730A3);
  border-color: var(--soft-scheduled-border, #C7D2FE);
}

/* Time off hours - Soft rose */
.employee-hours .hours-badge.time-off {
  background: var(--soft-timeoff-bg, #FFE4E6);
  color: var(--soft-timeoff-text, #BE123C);
  border-color: var(--soft-timeoff-border, #FECDD3);
}

/* Total hours - Soft sky blue */
.employee-hours .hours-badge.total {
  background: var(--soft-total-bg, #E0F2FE);
  color: var(--soft-total-text, #0369A1);
  border-color: var(--soft-total-border, #BAE6FD);
  font-weight: 700;
}

.employee-hours .hours-badge .badge-icon {
  font-size: 0.6rem;
  opacity: 0.8;
}

.employee-hours .hours-badge .badge-value {
  font-variant-numeric: tabular-nums;
}

/* ========================================
   Soft UI Shifts Needed Row
   ======================================== */

.shifts-needed-row {
  background-color: var(--soft-unassigned-bg, #FEF3C7) !important;
  border-bottom: 2px solid var(--soft-unassigned-border, #FDE68A);
}

.shifts-needed-header {
  background-color: var(--soft-unassigned-bg, #FEF3C7) !important;
  font-weight: bold;
  color: var(--soft-unassigned-text, #92400E);
}

.shifts-needed-cell {
  background-color: rgba(254, 243, 199, 0.3) !important;
}

.shift-needed-item {
  border: 2px dashed var(--soft-unassigned-border, #FDE68A) !important;
  background-color: var(--soft-unassigned-bg, #FEF3C7) !important;
  color: var(--soft-unassigned-text, #92400E);
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  cursor: move;
  transition: all 0.2s ease;
}

.shift-needed-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(146, 64, 14, 0.2);
  border-style: solid !important;
}

/* ========================================
   Soft UI Location Preferences
   ======================================== */

.location-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
  align-items: center;
}

.location-pref-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.location-pref-badge:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.location-pref-badge.primary {
  font-weight: 700;
}

.location-pref-badge .pref-icon {
  font-size: 0.5rem;
}

.location-pref-badge .pref-abbrev {
  max-width: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Float indicator */
.float-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.5rem;
  cursor: help;
  transition: transform 0.15s ease;
}

.float-indicator:hover {
  transform: scale(1.1);
}

.float-indicator.can-float {
  background: var(--soft-approved-bg, #D1FAE5);
  color: var(--soft-approved-text, #065F46);
  border: 1px solid var(--soft-approved-border, #A7F3D0);
}

.float-indicator.no-float {
  background: var(--soft-denied-bg, #FEE2E2);
  color: var(--soft-denied-text, #991B1B);
  border: 1px solid var(--soft-denied-border, #FECACA);
}

/* ========================================
   Soft UI Modal Header
   ======================================== */

.modal-header {
  background: var(--soft-primary, #012554);
  color: white;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
}

/* ========================================
   Soft UI Cell States
   ======================================== */

.schedule-cell.has-shifts {
  background-color: rgba(224, 242, 254, 0.3);
}

.schedule-cell.drag-over {
  background-color: var(--soft-primary-lt, #E0F2FE) !important;
  border: 2px dashed var(--soft-primary, #012554);
  animation: pulse-border-soft 1s infinite;
}

.schedule-cell.drag-copy {
  background-color: rgba(224, 231, 255, 0.5) !important;
  border: 2px dashed var(--soft-scheduled-text, #3730A3);
}

/* While a needed shift is dragged, rows in the wrong position fade back so the
   valid targets are obvious before the scheduler hovers anything. The
   transition sits on the base row so it eases out AND back in on dragend. */
.schedule-grid tbody tr {
  transition: opacity 0.12s ease;
}

.schedule-grid tr.role-mismatch-drag {
  opacity: 0.4;
}

@keyframes pulse-border-soft {
  0%, 100% { border-color: var(--soft-primary, #012554); }
  50% { border-color: rgba(1, 37, 84, 0.5); }
}

/* ========================================
   Soft UI Animation Classes
   ======================================== */

@keyframes fadeInGreen-soft {
  0% { opacity: 0; transform: scale(0.9); background-color: var(--soft-approved-bg); }
  100% { opacity: 1; transform: scale(1); background-color: var(--soft-bg-card); }
}

@keyframes fadeInBlue-soft {
  0% { opacity: 0.5; background-color: var(--soft-primary-lt); }
  100% { opacity: 1; background-color: var(--soft-bg-card); }
}

@keyframes fadeOutRed-soft {
  0% { opacity: 1; background-color: var(--soft-bg-card); }
  50% { background-color: var(--soft-denied-bg); }
  100% { opacity: 0; transform: scale(0.9); }
}

.shift-created {
  animation: fadeInGreen-soft 0.6s ease;
}

.shift-updated {
  animation: fadeInBlue-soft 0.6s ease;
}

.shift-deleted {
  animation: fadeOutRed-soft 0.4s ease;
}

/* ========================================
   Soft UI Holiday Styling
   ======================================== */

.holiday-header {
  background-color: var(--soft-denied-bg, #FEE2E2) !important;
  color: var(--soft-denied-text, #991B1B);
}

.holiday-cell {
  background-color: rgba(254, 226, 226, 0.2);
  position: relative;
}

.holiday-cell::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(153, 27, 27, 0.03) 10px, rgba(153, 27, 27, 0.03) 20px);
  pointer-events: none;
}

/* ========================================
   Soft UI Toast Styling
   ======================================== */

.toast {
  background: var(--soft-bg-card, #ffffff);
  border: 1px solid var(--soft-border, #E2E8F0);
  box-shadow: var(--soft-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.06));
}

.toast.success {
  border-left: 4px solid var(--soft-approved-text, #065F46);
}

.toast.error {
  border-left: 4px solid var(--soft-denied-text, #991B1B);
}

.toast.info {
  border-left: 4px solid var(--soft-total-text, #0369A1);
}

.toast.warning {
  border-left: 4px solid var(--soft-pending-text, #92400E);
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
  .schedule-toolbar {
    padding: 12px;
    gap: 12px;
  }

  .schedule-toolbar-group {
    width: 100%;
  }

  .schedule-toolbar-group.ms-auto {
    margin-left: 0;
  }

  .schedule-grid .employee-name {
    min-width: 150px;
  }
}