/* ============================================================
   SoloOS — Custom styles (beyond Tailwind)
   ============================================================ */

/* Smooth page transitions */
#view {
  animation: fadeIn 0.15s ease-in;
}

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

/* Sidebar active link indicator */
.nav-link {
  position: relative;
  transition: all 0.15s ease;
}

.nav-link:hover {
  background-color: #f8fafc;
}

/* KPI card hover effect */
[data-kpi] {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-kpi]:hover {
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
}

/* Modal animations */
#modal-overlay {
  transition: opacity 0.15s ease;
}

#modal-content {
  animation: modalIn 0.2s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Toast slide-in */
#toast-container > div {
  animation: toastIn 0.25s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Kanban drag styles (Phase 2) */
.card-dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.column-drag-over {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    left: -16rem;
    z-index: 40;
    height: 100vh;
    transition: left 0.2s ease;
  }

  #sidebar.open {
    left: 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  }

  #main {
    margin-left: 0;
  }

  #main > div:first-child {
    padding-left: 3.5rem;
  }
}

/* Keyboard shortcut key styling */
.shortcut-key {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-family: monospace;
  line-height: 1.5;
  color: #334155;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cloud sync status icon */
.sync-icon {
  stroke: #94a3b8; /* default: gray */
  transition: stroke 0.2s ease;
}

.sync-icon.sync-synced {
  stroke: #10b981; /* green */
}

.sync-icon.sync-syncing {
  stroke: #f59e0b; /* yellow */
  animation: syncPulse 1s ease-in-out infinite;
}

.sync-icon.sync-error {
  stroke: #ef4444; /* red */
}

@keyframes syncPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Print styles for review summaries */
@media print {
  #sidebar,
  #mobile-menu-toggle,
  #toast-container,
  #modal-overlay,
  #main > div:first-child,
  button,
  .no-print {
    display: none !important;
  }

  #main {
    margin-left: 0 !important;
  }

  #view {
    max-width: 100% !important;
    padding: 0 !important;
    animation: none !important;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 12pt !important;
  }

  .bg-surface {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }

  h2 { font-size: 18pt !important; margin-bottom: 12pt !important; }
  h3 { font-size: 14pt !important; margin-bottom: 8pt !important; }

  @page {
    margin: 1.5cm;
  }
}