/* ============================================================
   Repay360 — UI refresh (shared design layer)
   Implements the design-review recommendations in one place.
   Loaded AFTER each page's inline <style> so equal-specificity
   rules win, with a few raised selectors where a guaranteed
   override is needed.
   ------------------------------------------------------------
   Covers: accessible focus rings · AA status-badge contrast ·
   44px tap targets · comfortable controls · responsive tables.
   (Text-contrast + title-size changes are applied in markup.)
   ============================================================ */

/* 1 ── Accessible focus ring on every interactive control ----
   Previously there was no visible :focus-visible state, so
   keyboard / screen-reader users couldn't see focus.            */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #C7D2FE, 0 0 0 1px #4F46E5;
}
/* inputs already have a ring of their own border — keep it tidy */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px #C7D2FE;
}

/* 2 ── Status badges: darker ink for WCAG-AA contrast --------
   The tinted chips paired light text on light fills (~3:1).
   These darken the text to clear AA while keeping the hues.     */
.badge.badge-pending  { background: #FBF0DC; color: #B45309; }
.badge.badge-approved { background: #E7F6EF; color: #047857; }
.badge.badge-rejected { background: #FBE9E4; color: #C0341D; }
.badge.badge-paid     { background: #EDE9FE; color: #6D28D9; }
.badge.badge-draft    { background: #F1F1F4; color: #52555F; }

/* 3 ── Comfortable tap targets (44 × 44 minimum) -------------
   Header icon buttons were ~28px; nav links ~38px.             */
header button,
header a[href]:not(.nav-link) {
  min-height: 44px;
}
header button {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
nav a.nav-link {
  min-height: 44px;
}
/* primary CTA in the top bar gets a comfortable height too */
header a[class*="bg-primary-600"] {
  min-height: 44px;
}

/* 4 ── Responsive: keep wide tables usable on phones ---------
   Below 768px a 5-column table would clip the figures; let it
   scroll inside its card instead of breaking the layout.       */
@media (max-width: 767px) {
  .data-table,
  table.w-full {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table thead th,
  table.w-full thead th,
  .data-table tbody td,
  table.w-full tbody td {
    white-space: nowrap;
  }
}

/* 5 ── Micro: respect reduced-motion for any transitions ----- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 6 ── RBAC anti-flash: hide management nav until proven manager
   ------------------------------------------------------------
   repay360-rbac.js can only hide these links AFTER an async role
   lookup, which runs post-paint — so members briefly saw the
   restricted links flash in. This stylesheet loads in <head>, so
   we hide them BEFORE first paint and let rbac.js reveal them by
   setting <html data-role="owner|admin">. Members (and the brief
   pre-resolution window) keep them hidden — no flash.

   Matches the stable #nav-<slug> id AND the href in both the raw
   (.html) and Netlify Pretty-URL (no .html) forms, since not every
   page carries the ids. Owners/admins are exempted via :not().      */
html:not([data-role="owner"]):not([data-role="admin"]) :is(
  #nav-team-expenses, #nav-approvals, #nav-payments, #nav-reports, #nav-team,
  nav a[href$="/team-expenses"], nav a[href$="/team-expenses.html"],
  nav a[href$="/approvals"],  nav a[href$="/approvals.html"],
  nav a[href$="/payments"],   nav a[href$="/payments.html"],
  nav a[href$="/reports"],    nav a[href$="/reports.html"],
  nav a[href$="/team"],       nav a[href$="/team.html"],
  #tab-btn-org, #tab-btn-billing
) {
  display: none !important;
}

/* Management-only page content (e.g. dashboard quick-action cards
   like "Review Approvals" / "Invite Team Member" / "Manage workspace").
   Mark any such element with class="manage-only"; it's hidden for
   members and before role resolves, revealed for owners/admins.       */
html:not([data-role="owner"]):not([data-role="admin"]) .manage-only {
  display: none !important;
}

/* 7 ── Seamless cross-page transitions ──────────────────────
   The app is multi-page, so each nav is a full document load.
   The cross-document View Transitions API cross-fades between
   pages instead of the white blink. Progressive enhancement:
   browsers without support simply navigate as before.
   The sidebar is given a stable transition name so it stays
   anchored while only the main content area animates.          */
@view-transition { navigation: auto; }
#sidebar { view-transition-name: app-sidebar; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* 8 ── Skeleton loading — smart hiding for async content ─────
   Mark an async slot with class="skeleton" (optionally sized via
   width/height). It shows a shimmering placeholder and hides its
   own text/children until the data arrives; JS then removes the
   class and the real content fades in via .is-ready.            */
@keyframes r360-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton {
  position: relative;
  color: transparent !important;
  background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 37%, #EEF0F3 63%);
  background-size: 200% 100%;
  animation: r360-shimmer 1.3s ease-in-out infinite;
  border-radius: 8px;
  user-select: none;
  pointer-events: none;
}
.skeleton * { visibility: hidden !important; }
@keyframes r360-fade-in { from { opacity: 0; } to { opacity: 1; } }
.is-ready { animation: r360-fade-in .25s ease both; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .is-ready { animation: none; }
}
