/**
 * Horsify Reconnect Overlay
 *
 * Custom, branded reconnect experience for Blazor Server SignalR connection drops.
 * Replaces the default unstyled #components-reconnect-modal with a polished overlay.
 *
 * Design tokens:
 *   Brand primary:  #2E4E3F  (deep sage green)
 *   Brand accent:   #D3A71A  (golden yellow)
 *   Overlay bg:     rgba(0,0,0,0.45) + backdrop-blur
 *   Card bg:        #FFFFFF
 *   Success tint:   #10B981
 *   Warn/failed:    #B45309  (amber — not alarming red)
 *
 * States driven by JS class changes on #horsify-reconnect-overlay:
 *   .is-reconnecting  — spinner + "Reconnecting…" text
 *   .is-connected     — brief success flash then auto-hidden
 *   .is-failed        — friendly message + Refresh button
 *
 * Load order: after Tailwind, Syncfusion, and all other CSS.
 * Build: npm run minify:css  →  reconnect.min.css  (auto-picked up by minify-css.js)
 *
 * ══════════════════════════════════════════════════════════════════
 *  TABLE OF CONTENTS
 * ──────────────────────────────────────────────────────────────────
 *  1.  Hide Blazor's default reconnect modal
 *  2.  Overlay base (backdrop)
 *  3.  Card (content panel)
 *  4.  Spinner
 *  5.  Success icon
 *  6.  Text elements
 *  7.  Refresh button
 *  8.  State modifiers (.is-reconnecting, .is-connected, .is-failed)
 *  9.  Mobile — bottom-anchored toast
 * 10.  Reduced motion
 * 11.  Dark mode
 * ══════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────
   1.  Hide Blazor's default reconnect modal
       Blazor MUST still find this element in the DOM — we just
       keep it invisible so our custom overlay drives the UX.
   ───────────────────────────────────────────────────────────────── */
#components-reconnect-modal {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   2.  Overlay base (backdrop)
   ───────────────────────────────────────────────────────────────── */
#horsify-reconnect-overlay {
  /* Layout */
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Backdrop */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  /* Hidden by default — JS toggles visibility via opacity + pointer-events */
  opacity: 0;
  pointer-events: none;

  /* Entry / exit animation */
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

#horsify-reconnect-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ─────────────────────────────────────────────────────────────────
   3.  Card (content panel)
   ───────────────────────────────────────────────────────────────── */
.hrc-card {
  /* Sizing */
  width: 100%;
  max-width: 360px;
  padding: 32px 28px 28px;

  /* Surface */
  background: #ffffff;
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.18),
    0 4px  16px rgba(0, 0, 0, 0.08);

  /* Content layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;

  /* Slide-up entrance */
  transform: translateY(16px);
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   280ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

#horsify-reconnect-overlay.is-visible .hrc-card {
  transform: translateY(0);
  opacity: 1;
}

/* Thin branded top accent bar */
.hrc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #2E4E3F 0%, #4A6F5C 60%, #D3A71A 100%);
}

.hrc-card {
  position: relative; /* needed for ::before */
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────
   4.  Spinner  (pure-CSS ring)
   ───────────────────────────────────────────────────────────────── */
.hrc-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
}

.hrc-spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3.5px solid rgba(46, 78, 63, 0.15);
  border-top-color: #2E4E3F;
  animation: hrc-spin 0.9s linear infinite;
}

@keyframes hrc-spin {
  to { transform: rotate(360deg); }
}

/* Subtle pulse on the spinner wrapper */
.hrc-spinner-wrap {
  animation: hrc-pulse 1.8s ease-in-out infinite;
}

@keyframes hrc-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ─────────────────────────────────────────────────────────────────
   5.  Success icon  (checkmark circle)
   ───────────────────────────────────────────────────────────────── */
.hrc-success-icon {
  display: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dcfce7;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* SVG checkmark inside */
.hrc-success-icon::after {
  content: '';
  display: block;
  width: 26px;
  height: 14px;
  border-left: 3px solid #16a34a;
  border-bottom: 3px solid #16a34a;
  transform: rotate(-45deg) translate(1px, -3px);
  animation: hrc-check-draw 0.4s ease forwards;
}

@keyframes hrc-check-draw {
  from { opacity: 0; transform: rotate(-45deg) translate(1px, -3px) scale(0.6); }
  to   { opacity: 1; transform: rotate(-45deg) translate(1px, -3px) scale(1);   }
}

/* ─────────────────────────────────────────────────────────────────
   6.  Text elements
   ───────────────────────────────────────────────────────────────── */
.hrc-logo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2E4E3F;
  opacity: 0.55;
  margin-bottom: 2px;
}

.hrc-title {
  font-size: 17px;
  font-weight: 700;
  color: #212529;
  line-height: 1.25;
  margin: 0;
}

.hrc-subtitle {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
  max-width: 260px;
}

/* ─────────────────────────────────────────────────────────────────
   7.  Refresh button
   ───────────────────────────────────────────────────────────────── */
.hrc-refresh-btn {
  display: none; /* shown only in failed state */
  margin-top: 8px;
  padding: 11px 24px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #2E4E3F;
  color: #ffffff;
  transition:
    background 150ms ease,
    transform  100ms ease,
    box-shadow 150ms ease;
  /* Minimum touch target: WCAG 2.5.5 AAA requires 44×44 CSS px.
     Horizontal dimension is met by padding (11px × 2 = 22px) + content text
     width which always exceeds 22px. min-width is set explicitly to guarantee
     the horizontal target even for very short label translations. */
  min-height: 44px;
  min-width: 44px;
}

.hrc-refresh-btn:hover {
  background: #3d6b54;
  box-shadow: 0 4px 12px rgba(46, 78, 63, 0.35);
}

.hrc-refresh-btn:active {
  transform: scale(0.97);
  background: #1F3329;
}

.hrc-refresh-btn:focus-visible {
  outline: 3px solid #D3A71A;
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────
   8.  State modifiers
   ───────────────────────────────────────────────────────────────── */

/* — Reconnecting ————————————————————————————————————————————————— */
#horsify-reconnect-overlay.is-reconnecting .hrc-spinner-wrap  { display: flex; }
#horsify-reconnect-overlay.is-reconnecting .hrc-success-icon  { display: none;  }
#horsify-reconnect-overlay.is-reconnecting .hrc-refresh-btn   { display: none;  }

/* — Connected (briefly shown before auto-hide) ———————————————— */
#horsify-reconnect-overlay.is-connected .hrc-spinner-wrap     { display: none;  }
#horsify-reconnect-overlay.is-connected .hrc-success-icon     { display: flex;  }
#horsify-reconnect-overlay.is-connected .hrc-refresh-btn      { display: none;  }
#horsify-reconnect-overlay.is-connected .hrc-card::before     {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
}
#horsify-reconnect-overlay.is-connected .hrc-title {
  color: #15803d;
}

/* — Failed ——————————————————————————————————————————————————————— */
#horsify-reconnect-overlay.is-failed .hrc-spinner-wrap        { display: none;  }
#horsify-reconnect-overlay.is-failed .hrc-success-icon        { display: none;  }
#horsify-reconnect-overlay.is-failed .hrc-refresh-btn         { display: inline-flex; align-items: center; justify-content: center; }
#horsify-reconnect-overlay.is-failed .hrc-card::before        {
  background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
}
#horsify-reconnect-overlay.is-failed .hrc-title {
  color: #92400e;
}

/* ─────────────────────────────────────────────────────────────────
   9.  Mobile  — bottom-anchored toast (≤ 640 px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #horsify-reconnect-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .hrc-card {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  /* Padding breakdown:
     - 28px top: slightly less than the desktop card's 32px top — appropriate
       for the compact bottom-sheet layout that spans full screen width.
     - 20px base bottom: comfortable clearance above the home indicator on
       devices without a safe area (standard Android / non-notch iPhones).
       This is less than the desktop's 28px bottom because the bottom-sheet
       sits flush at the screen edge and needs less visual breathing room.
     - env(safe-area-inset-bottom): additional dynamic inset on notched /
       Dynamic-Island iPhones so content never hides behind the home indicator. */
  padding: 28px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    /* Slide up from bottom */
    transform: translateY(100%);
    transition:
      transform 320ms cubic-bezier(0.34, 1.22, 0.64, 1),
      opacity   280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  #horsify-reconnect-overlay.is-visible .hrc-card {
    transform: translateY(0);
  }

  .hrc-card::before {
    border-radius: 20px 20px 0 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   10. Reduced motion — respect user preference
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #horsify-reconnect-overlay,
  .hrc-card,
  .hrc-refresh-btn {
    transition: none !important;
    animation: none !important;
  }

  .hrc-spinner {
    animation: hrc-spin 1.5s linear infinite; /* keep rotating, just slower */
  }

  .hrc-spinner-wrap {
    animation: none;
  }

  .hrc-success-icon::after {
    animation: none;
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────
   11. Dark mode
   ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] #horsify-reconnect-overlay {
  background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .hrc-card {
  background: #1d2922;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 4px  16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .hrc-title {
  color: #e8ede8;
}

[data-theme="dark"] .hrc-subtitle {
  color: #8a9e8a;
}

[data-theme="dark"] .hrc-logo {
  color: #6a9e7f;
}

[data-theme="dark"] .hrc-spinner {
  border-color: rgba(106, 158, 127, 0.2);
  border-top-color: #6a9e7f;
}

[data-theme="dark"] #horsify-reconnect-overlay.is-connected .hrc-success-icon {
  background: #14532d;
}