/* PDBOS — supplemental styles.
   Tailwind (CDN) carries the layout; this file holds only what utility classes
   cannot express: keyframes, scrollbars, and a few component primitives. */

@keyframes loading {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.animate-fade-in-up { animation: fade-in-up .18s ease-out both; }
.animate-slide-up   { animation: slide-up .22s cubic-bezier(.32,.72,0,1) both; }

/* Skeleton shimmer for loading states */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
}
@keyframes skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Thin scrollbars, desktop only */
@media (min-width: 1024px) {
  .thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
  .thin-scroll::-webkit-scrollbar-track { background: transparent; }
  .thin-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
  .thin-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}

/* Navigation item */
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  border-radius: .5rem; padding: .5rem .75rem;
  font-size: .875rem; font-weight: 500; color: #475569;
  transition: background-color .15s, color .15s;
}
.nav-item:hover { background-color: #f1f5f9; color: #0f172a; }
.nav-item[aria-current="page"] { background-color: #0f172a; color: #fff; }
.nav-item[aria-current="page"] .nav-icon { color: #fff; }
.nav-icon { width: 1.1rem; text-align: center; color: #94a3b8; font-size: .8rem; }

/* Bottom navigation item */
.tab-item {
  display: flex; flex: 1 1 0%; flex-direction: column; align-items: center;
  gap: .125rem; padding: .5rem .25rem; font-size: .625rem; font-weight: 500;
  color: #64748b; transition: color .15s;
}
.tab-item i { font-size: 1.05rem; }
.tab-item[aria-current="page"] { color: #0f172a; font-weight: 600; }

/* Form primitives */
.field-label {
  display: block; margin-bottom: .375rem;
  font-size: .75rem; font-weight: 600; color: #475569;
}
.field-input,
.field-select,
.field-textarea {
  width: 100%; border-radius: .5rem; border: 1px solid #e2e8f0;
  background-color: #fff; padding: .5rem .75rem;
  font-size: .875rem; color: #0f172a; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: #598bff; box-shadow: 0 0 0 3px #d9e5ff;
}
.field-input:disabled,
.field-select:disabled { background-color: #f8fafc; color: #94a3b8; }
.field-textarea { min-height: 5rem; resize: vertical; }
.field-error { margin-top: .25rem; font-size: .7rem; color: #e11d48; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; padding: .5rem .875rem;
  font-size: .875rem; font-weight: 500; transition: background-color .15s, opacity .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background-color: #0f172a; color: #fff; }
.btn-primary:hover:not(:disabled) { background-color: #1e293b; }
.btn-secondary { background-color: #f1f5f9; color: #334155; }
.btn-secondary:hover:not(:disabled) { background-color: #e2e8f0; }
.btn-ghost { color: #475569; }
.btn-ghost:hover:not(:disabled) { background-color: #f1f5f9; }
.btn-danger { background-color: #e11d48; color: #fff; }
.btn-danger:hover:not(:disabled) { background-color: #be123c; }
.btn-sm { padding: .3rem .625rem; font-size: .75rem; }

/* Cards */
.card {
  border-radius: .75rem; border: 1px solid #e2e8f0;
  background-color: #fff;
}
.card-pad { padding: 1rem; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: 9999px; padding: .125rem .5rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}

/* Tables */
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table thead th {
  padding: .625rem .75rem; text-align: left;
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b;
  border-bottom: 1px solid #e2e8f0; background-color: #f8fafc;
  white-space: nowrap;
}
.data-table tbody td {
  padding: .625rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
}
.data-table tbody tr:hover { background-color: #f8fafc; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* Truncate helper for table cells */
.cell-truncate { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Timeline */
.timeline-item { position: relative; padding-left: 1.75rem; padding-bottom: 1.125rem; }
.timeline-item::before {
  content: ''; position: absolute; left: .3125rem; top: 1.25rem; bottom: 0;
  width: 1px; background-color: #e2e8f0;
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
  position: absolute; left: 0; top: .3125rem;
  height: .6875rem; width: .6875rem; border-radius: 9999px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1;
}

/* Progress bar */
.progress-track { height: .375rem; border-radius: 9999px; background-color: #e2e8f0; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 9999px; transition: width .3s ease; }

/* Prevent iOS zoom-on-focus without shrinking desktop inputs */
@media (max-width: 640px) {
  .field-input, .field-select, .field-textarea, input[type="search"] { font-size: 1rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}