/* =====================================================================
   F27 — PRODUCTION POLISH
   Accessibility, loading states, mobile touch targets, motion safety.
   Additive only: no existing component is restyled or overridden.
   ===================================================================== */

/* ---------- 1. Accessibility: visible keyboard focus everywhere ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #22C55E;
  outline-offset: 2px;
  border-radius: 6px;
}
/* Don't show the ring for mouse users */
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }

/* Skip link — first tab stop, hidden until focused */
.f27-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: #16A34A; color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 0; font-weight: 700; font-size: 14px; text-decoration: none;
}
.f27-skip:focus { left: 0; }

/* Screen-reader-only text */
.sr-only-f27 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 2. Top progress bar (route/AJAX feedback) ---------- */
#f27-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #22C55E, #10B981);
  box-shadow: 0 0 10px rgba(34,197,94,.7);
  z-index: 99999; transition: width .25s ease, opacity .3s ease; opacity: 0;
  pointer-events: none;
}
#f27-bar.on { opacity: 1; }

/* ---------- 3. Skeleton loaders ---------- */
.skeleton {
  background: linear-gradient(90deg, #EEF2F0 25%, #F7FAF9 37%, #EEF2F0 63%);
  background-size: 400% 100%;
  animation: f27shimmer 1.3s ease-in-out infinite;
  border-radius: 10px; color: transparent !important;
}
@keyframes f27shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- 4. Button loading state ---------- */
button[data-loading="1"], .btn[data-loading="1"] {
  position: relative; pointer-events: none; opacity: .75;
}
button[data-loading="1"]::after, .btn[data-loading="1"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: f27spin .6s linear infinite;
}
@keyframes f27spin { to { transform: rotate(360deg); } }

/* ---------- 5. Images: stop layout shift, fade in when loaded ---------- */
img { max-width: 100%; height: auto; }
img[loading="lazy"] { background: #F1F5F4; }
img.f27-fade { opacity: 0; transition: opacity .35s ease; }
img.f27-fade.f27-in { opacity: 1; }

/* ---------- 6. Offline / connection banner ---------- */
#f27-offline {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(140%);
  background: #0F172A; color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 11px 20px; border-radius: 12px; z-index: 99998;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); transition: transform .3s ease;
  display: flex; align-items: center; gap: 9px;
}
#f27-offline.show { transform: translateX(-50%) translateY(0); }

/* ---------- 7. Mobile: touch targets + safe areas ---------- */
@media (max-width: 768px) {
  /* Apple/Google guidance: 44px minimum tap target */
  button, .btn, a.btn, input[type="submit"], select, [role="button"] { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */

  /* Tables scroll instead of breaking the layout */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Respect notch / home indicator */
  body { padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 400px) {
  /* Very small phones: never let content overflow horizontally */
  html, body { overflow-x: hidden; }
}

/* ---------- 8. Smooth scrolling + motion safety ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 9. Print ---------- */
@media print {
  nav, aside, footer, .no-print, #f27-bar { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}