/* ===================================================
 * Cable Locator — custom styles
 * =================================================== */

[x-cloak] { display: none !important; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
  background-clip: padding-box;
}
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; background-clip: padding-box; }

/* ===== Selection ===== */
::selection { background: #dbeafe; color: #1e3a8a; }
.dark ::selection { background: #1e40af; color: #eff6ff; }

/* ===== Focus rings (keyboard-only) ===== */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

/* ===== Number input spinners off ===== */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; }

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

/* ===== Smooth skeleton pulse ===== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.animate-pulse.bg-\[length\:200\%_100\%\] {
  animation: shimmer 1.5s linear infinite;
}

/* ===== Subtle row hover lift (optional) ===== */
tbody tr {
  transition: background-color 120ms ease, transform 120ms ease;
}

/* ===== Remove default select arrow on mobile Chrome, re-add custom ===== */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

/* ===== Table on narrow screens: slight tightening ===== */
@media (max-width: 1024px) {
  table th, table td { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ===== Prevent body scroll jank when scrollbar appears ===== */
html { scrollbar-gutter: stable; }