/* =============================================================
 * TruckerProfit CRM — polish layer
 * Added: 2026-05-26 continuous-improvement round
 *
 * Brings 17 dashboards up to the TruckerProfit Standards bar:
 *   - 48 px touch targets on all panels under (hover:none)
 *   - Loading skeletons (.tp-skeleton)
 *   - Empty states  (.tp-empty)
 *   - Mobile banner pattern (already shipped per-page; canonicalized here)
 *
 * Palette: CEO-approved navy #030D1C + gold #D4A84B (from _tokens.css).
 * Do NOT introduce new color tokens here; reference --color-* / --bg-* /
 * --text-* from the canonical tokens layer.
 * ============================================================= */

/* ----- Loading skeleton ----- */
.tp-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(212, 168, 75, 0.06);
  min-height: 14px;
}
.tp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 75, 0.14) 50%,
    transparent 100%
  );
  animation: tpShimmer 1.2s linear infinite;
}
.tp-skeleton.is-line   { min-height: 14px; margin: 6px 0; }
.tp-skeleton.is-block  { min-height: 80px; margin: 8px 0; }
.tp-skeleton.is-row    { min-height: 38px; margin: 4px 0; }
@keyframes tpShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-skeleton::after { animation: none; }
}

/* ----- Empty state ----- */
.tp-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-muted, #B6BFCB);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  line-height: 1.6;
  background: rgba(245, 239, 224, 0.02);
  border: 1px dashed rgba(212, 168, 75, 0.22);
  border-radius: 10px;
}
.tp-empty .icon {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.5;
}
.tp-empty .title {
  font-weight: 700;
  color: var(--text-primary, #F5EFE0);
  margin-bottom: 4px;
  font-family: var(--font-display, "Syne", sans-serif);
}
.tp-empty .hint { color: var(--text-dim, #6E7D92); font-size: 13px; }
.tp-empty .cta {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 18px;
  background: var(--color-gold-500, #D4A84B);
  color: var(--bg-base, #030D1C);
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  transition: background .15s, transform .15s;
}
.tp-empty .cta:hover {
  background: var(--color-gold-400, #E2BC65);
  transform: translateY(-1px);
}

/* ----- Touch target enforcement ----- */
@media (hover: none), (pointer: coarse) {
  .quick-actions a,
  .quick-actions button,
  .btn-brk-gold, .btn-brk-ghost,
  .data-table button, .data-table a,
  .investor-actions a, .investor-actions button,
  .sp-actions a, .sp-actions button,
  .vendor-actions a, .vendor-actions button,
  .employee-actions a, .employee-actions button,
  table button, table a.btn,
  input[type="submit"], input[type="button"],
  select, input[type="checkbox"], input[type="radio"] {
    min-height: 48px;
    min-width: 48px;
    box-sizing: border-box;
  }
  /* For inline links inside data tables, target the row */
  table tr td a:not(.btn):not(.cta) {
    display: inline-block;
    padding: 8px 4px;
  }
}

/* ----- Mobile banner (canonical) ----- */
.tp-mobile-banner {
  display: none;
  background: linear-gradient(180deg, rgba(212,168,75,.18), rgba(212,168,75,.08));
  border: 1px solid rgba(212,168,75,.35);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
  color: var(--text-primary, #F5EFE0);
  font-size: 13px;
  line-height: 1.5;
}
.tp-mobile-banner b { color: var(--color-gold-500, #D4A84B); }
@media (max-width: 640px) {
  .tp-mobile-banner { display: block; }
}