/*
 * MicroERP Loaders — shared, framework-free loader animations (8 variants).
 * Single source of truth. This exact file is VENDORED (copied) into every
 * app that wants branded loaders:
 *
 *   microerp_panel/public/office/loaders.css        (/office)
 *   microerp_realestate/.../public/realestate/...   (/realestate SPA)
 *   (add your app here when you adopt loaders — see "INTEGRATING A NEW APP")
 *
 * ── Why vendored, not hot-loaded ─────────────────────────────────────────
 * The *assignments* (which situation shows which loader/caption) are
 * centralized on the panel (MicroERP Loader Settings) and delivered to
 * tenants over the tenant_bridge (get_loader_config). The CSS itself is
 * copied into each app so a tenant never makes a cross-site request for a
 * render-blocking asset, and dedicated/offline tenants keep working.
 * When you edit this file, bump MRL_ASSET_VERSION and re-copy to every app.
 *
 * ── Usage ────────────────────────────────────────────────────────────────
 *   <div class="mrl mrl--ring mrl--md" role="status" aria-label="Loading">
 *     …variant SVG (see SVG_MARKUP below)…
 *   </div>
 *   <div class="mrl-caption">Loading listings…</div>
 *
 * Sizes: .mrl--sm (48px) · .mrl--md (96px, default) · .mrl--lg (144px)
 * Colors: set --mrl-accent (fill/bg) and --mrl-ink (stroke/mark) on .mrl
 * or any ancestor. Defaults follow the app theme where possible
 * (--o-accent / --o-text) so dark mode just works.
 *
 * ── SVG_MARKUP (identical for every variant except ring/dots) ───────────
 *   <svg class="mrl-svg" viewBox="0 0 120 120" aria-hidden="true">
 *     <g class="mrl-center">
 *       <rect class="mrl-bg" x="6" y="6" width="108" height="108" rx="28"/>
 *       <path class="mrl-mark" d="M33 42 C48 58, 72 58, 87 42"/>
 *       <rect class="mrl-stem" x="53" y="64" width="14" height="32" rx="7"/>
 *     </g>
 *   </svg>
 *   ring variant: add <circle class="mrl-ring" cx="60" cy="60" r="52"/>
 *     before the <g> (the logo scales down automatically).
 *   dots variant: <svg class="mrl-svg" viewBox="0 0 120 120" aria-hidden="true">
 *     <circle class="mrl-dot" cx="42" cy="60" r="9"/>
 *     <circle class="mrl-dot" cx="60" cy="60" r="9"/>
 *     <circle class="mrl-dot" cx="78" cy="60" r="9"/></svg>
 *
 * ── INTEGRATING A NEW APP (checklist for future apps) ───────────────────
 *   1. Vendor this file into the app's public assets and load it (SPA
 *      bundle import or <link> on server-rendered pages).
 *   2. Render a loader component/element with the classes above; pick the
 *      variant from config, never hard-code it.
 *   3. Declare the app's SITUATION KEYS in code (e.g. "myapp.list_load") —
 *      the panel only assigns values to keys apps declare; free-typed keys
 *      never match and silently fall back to the default.
 *   4. Fetch assignments at boot from the panel:
 *      - tenants: tenant_bridge.get_loader_config (secret channel, fail-soft
 *        to code defaults when the bridge is unavailable)
 *      - panel-side apps (/office): the loader registry API directly.
 *   5. Ship a sane default variant+caption per situation in code so the app
 *      looks finished before any assignment exists.
 *
 * MRL_ASSET_VERSION 1
 */

.mrl {
  --mrl-accent: var(--o-accent, #55d3a7);
  --mrl-ink: var(--o-text, #000000);
  display: inline-grid;
  place-items: center;
  line-height: 0;
}

.mrl-svg {
  overflow: visible;
  width: 96px;
  height: 96px;
}

.mrl--sm .mrl-svg { width: 48px; height: 48px; }
.mrl--md .mrl-svg { width: 96px; height: 96px; }
.mrl--lg .mrl-svg { width: 144px; height: 144px; }

/* Shared logo shapes */
.mrl-bg { fill: var(--mrl-accent); }
.mrl-mark {
  fill: none;
  stroke: var(--mrl-ink);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mrl-stem { fill: var(--mrl-ink); }
.mrl-center { transform-origin: 60px 60px; }

/* Caption below the loader */
.mrl-caption {
  margin-top: 10px;
  font-size: 13px;
  text-align: center;
  color: var(--o-text-soft, var(--o-text, #6b7280));
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .mrl-svg *, .mrl-svg {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Variant 1: pulse — simple and clean breathing effect ─────────────── */
.mrl--pulse .mrl-center { animation: mrl-pulse 1.4s ease-in-out infinite; }
@keyframes mrl-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.65; }
  50% { transform: scale(1); opacity: 1; }
}

/* ── Variant 2: spin — classic rotating loader ────────────────────────── */
.mrl--spin .mrl-center { animation: mrl-spin 1.2s linear infinite; }
@keyframes mrl-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Variant 3: bounce — friendly vertical movement ───────────────────── */
.mrl--bounce .mrl-center { animation: mrl-bounce 1.1s ease-in-out infinite; }
@keyframes mrl-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.03); }
}

/* ── Variant 4: draw — the logo mark draws itself ─────────────────────── */
.mrl--draw .mrl-mark {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: mrl-draw-mark 1.8s ease-in-out infinite;
}
.mrl--draw .mrl-stem {
  animation: mrl-draw-stem 1.8s ease-in-out infinite;
  transform-origin: 60px 80px;
}
@keyframes mrl-draw-mark {
  0% { stroke-dashoffset: 90; opacity: 0.2; }
  45%, 70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -90; opacity: 0.2; }
}
@keyframes mrl-draw-stem {
  0%, 30% { opacity: 0; transform: scaleY(0.4); }
  50%, 80% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.4); }
}

/* ── Variant 5: breathe — background expands softly ───────────────────── */
.mrl--breathe .mrl-bg {
  transform-origin: 60px 60px;
  animation: mrl-breathe-bg 1.5s ease-in-out infinite;
}
.mrl--breathe .mrl-mark,
.mrl--breathe .mrl-stem { animation: mrl-breathe-fade 1.5s ease-in-out infinite; }
@keyframes mrl-breathe-bg {
  0%, 100% { transform: scale(0.9); opacity: 0.75; }
  50% { transform: scale(1); opacity: 1; }
}
@keyframes mrl-breathe-fade {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* ── Variant 6: ring — spinner ring around the logo ───────────────────── */
.mrl--ring .mrl-ring {
  fill: none;
  stroke: var(--mrl-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 70 160;
  transform-origin: 60px 60px;
  animation: mrl-ring-spin 1s linear infinite;
}
.mrl--ring .mrl-center { transform: scale(0.72); }
@keyframes mrl-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Variant 7: flip — horizontal 3D-style flip ───────────────────────── */
.mrl--flip .mrl-center { animation: mrl-flip 1.6s ease-in-out infinite; }
@keyframes mrl-flip {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

/* ── Variant 8: dots — minimal loader using brand color ───────────────── */
.mrl--dots .mrl-dot {
  fill: var(--mrl-accent);
  animation: mrl-dot-pulse 1.2s ease-in-out infinite;
}
.mrl--dots .mrl-dot:nth-child(2) { animation-delay: 0.15s; }
.mrl--dots .mrl-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes mrl-dot-pulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-8px); }
}