/* Custom Styles for Shift Manager */
@layer base {
  body {
    font-family: 'Rubik', 'Heebo', system-ui, sans-serif;
  }
}

/* Animations */
@keyframes scaleUp {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlide {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-scaleUp {
  animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fadeIn {
  animation: fadeIn 0.25s ease-out forwards;
}

.animate-toast {
  animation: toastSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tabs */
.tab-btn {
  transition: all 0.2s ease;
}

.tab-btn.active-tab {
  color: #ffffff;
  border-bottom-color: #818cf8;
  background-color: rgba(99, 102, 241, 0.15);
}

.tab-btn.inactive-tab {
  color: #94a3b8;
  border-bottom-color: transparent;
}

.tab-btn.inactive-tab:hover {
  color: #f1f5f9;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Shift Cell Styles */
.shift-slot {
  min-height: 80px;
  transition: all 0.15s ease;
  position: relative;
}

.shift-slot:hover {
  filter: brightness(0.96);
}

/* Day header highlights */
.day-header-sun { background-color: #e2e8f0; }
.day-header-mon { background-color: #e2e8f0; }
.day-header-tue { background-color: #e2e8f0; }
.day-header-wed { background-color: #e2e8f0; }
.day-header-thu { background-color: #e2e8f0; }
.day-header-fri { background-color: #fef08a; color: #713f12; }
.day-header-sat { background-color: #c7d2fe; color: #312e81; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Touch & Mobile UX Enhancements */
* {
  -webkit-tap-highlight-color: transparent;
}

button, a, select, input {
  touch-action: manipulation;
}

/* Prevent auto-zoom in iOS inputs on focus */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Safe area padding for iPhones with bottom home indicator */
.safe-bottom {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
}

/* Bottom Sheet on Mobile (< 640px) */
@keyframes slideUpSheet {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-slideUpSheet {
  animation: slideUpSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (max-width: 640px) {
  .mobile-bottom-sheet-container {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .mobile-bottom-sheet-content {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: slideUpSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
  .sheet-drag-handle {
    width: 44px;
    height: 5px;
    background-color: #cbd5e1;
    border-radius: 9999px;
    margin: 0 auto 10px auto;
    display: block;
  }
}

/* Mobile Day Pill Tabs */
.day-pill {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.day-pill.active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  transform: translateY(-1px);
}
.day-pill.inactive {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.day-pill.inactive:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Print Stylesheet */
@media print {
  body {
    background: #ffffff !important;
    padding: 0 !important;
  }
  header, nav, #btn-prev-week, #btn-next-week, #btn-this-week,
  .sticky, button, #toast-container, .modal, #tab-submit-content, #tab-employees-content, #tab-settings-content {
    display: none !important;
  }
  #tab-manager-content {
    display: block !important;
  }
  #manager-table-view {
    display: block !important;
  }
  #manager-matrix-view {
    display: none !important;
  }
  #schedule-export-wrapper {
    box-shadow: none !important;
    border: 2px solid #000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  table {
    border-collapse: collapse !important;
    width: 100% !important;
  }
  th, td {
    border: 2px solid #000 !important;
    color: #000 !important;
  }
}