/* Personal Cash Flow Calculator — custom styles
   Most styling is via Tailwind utility classes; this file holds
   things that benefit from being centralised (animations, focus rings,
   print styles, mobile niceties). */

* { -webkit-tap-highlight-color: transparent; }

/* Smooth view transitions */
.view-enter {
  animation: fadeSlideIn 240ms ease-out;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drop zone styling */
.dropzone {
  border: 2px dashed #cbd5e1;
  background: linear-gradient(0deg, #ffffff, #f8fafc);
  transition: border-color 160ms, background-color 160ms;
}
.dropzone.is-dragging {
  border-color: #0d9488;
  background-color: #f0fdfa;
}

/* Spinner */
.spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #e2e8f0;
  border-top-color: #0d9488;
  border-radius: 9999px;
  animation: spin 0.7s linear infinite;
}
.spinner-lg {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Timeline visualizer cells */
.tl-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  height: 28px;
  min-width: 52px;
  border-radius: 4px;
}
.tl-cell.empty   { background: #f1f5f9; color: #94a3b8; }
.tl-cell.covered { background: #99f6e4; color: #115e59; }
.tl-cell.overlap { background: #14b8a6; color: white; }
.tl-cell.gap     { background: #fef3c7; color: #92400e; }

/* Focus visibility for keyboard users */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Toast animations */
.toast {
  animation: toastIn 200ms ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile-friendly tap target sizing for inline buttons */
@media (max-width: 640px) {
  .tap-44 { min-height: 44px; min-width: 44px; }
}

/* Print styles for the cash flow statement */
@media print {
  header, footer, #step-progress, .no-print { display: none !important; }
  body { background: white; }
  main { max-width: 100%; padding: 0; }
  .print-card { box-shadow: none !important; border: 1px solid #cbd5e1 !important; page-break-inside: avoid; }
}

/* Card hover */
.card-interactive {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-interactive:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(15, 118, 110, 0.18);
}

/* Disabled style */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbar polish (desktop) */
@media (min-width: 768px) {
  ::-webkit-scrollbar { height: 8px; width: 8px; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}

/* Manual queue card stack effect */
.queue-card {
  position: relative;
  background: white;
}
.queue-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Number formatting helper */
.tabular { font-variant-numeric: tabular-nums; }

/* Chip / badge */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   S33 — button design system. Three tiers used across the wizard so buttons
   stop being styled ad-hoc. Self-contained (no Tailwind dependency) so a
   button adopts the look with a single class. min-height keeps them tappable.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: #0f766e; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #115e59; }

.btn-secondary { background: #fff; color: #0f172a; border-color: #cbd5e1; }
.btn-secondary:hover:not(:disabled) { background: #f8fafc; }

.btn-tertiary { background: transparent; color: #334155; }
.btn-tertiary:hover:not(:disabled) { background: #f1f5f9; }

/* Pass X — browser print: show ALL heatmap tabs (the on-screen tab switcher
   hides two of the three with inline display:none, which used to win). */
@media print {
  .heat-panel { display: block !important; }
  .heat-tab   { display: none !important; }
  #feedback-fab, #toast-region { display: none !important; }
}