/* ==========================================================
   master.css – Pre-Vue skeleton screen & global spinner overrides
   ========================================================== */

/* ----------------------------------------------------------
   @keyframes: spinning logo rotation (clean, no glow)
   ---------------------------------------------------------- */
  @keyframes spin-logo {
    0%   { transform: rotate(0deg);   }
    100% { transform: rotate(360deg); }
  }

  @-webkit-keyframes spin-logo {
    0%   { -webkit-transform: rotate(0deg);   }
    100% { -webkit-transform: rotate(360deg); }
  }

/* ----------------------------------------------------------
   Full-page skeleton loader (pre-Vue, in master.blade.php)
   ---------------------------------------------------------- */
  .loading_wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    gap: 16px;
  }

  /* Show the logo and spin it */
  .loader_logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loader_logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    animation: spin-logo 1.4s linear infinite;
    -webkit-animation: spin-logo 1.4s linear infinite;
  }

  /* Hide the old bouncing-dots loader */
  .loading {
    display: none !important;
  }

/* ----------------------------------------------------------
   Vue page-level spinner (.loading_page.spinner.spinner-primary)
   Override to show the spinning logo — no Vue files need editing.
   ---------------------------------------------------------- */
  .loading_page.spinner,
  .loading_page.spinner.spinner-primary {
    /* Reset the CSS-ring appearance */
    background: var(--app-logo-url, url('/images/logo.png'))
                center / contain no-repeat !important;
    border:        none !important;
    border-radius: 0    !important;

    /* Size & positioning (keep original geometry) */
    width:       70px !important;
    height:      70px !important;
    left:        calc(50% - 35px) !important;
    margin-top:  5% !important;
    position:    relative;

    /* Spin — clean rotation, no shadow */
    animation: spin-logo 1.4s linear infinite !important;
    -webkit-animation: spin-logo 1.4s linear infinite !important;
  }

  /* Kill any pseudo-element rings the framework adds */
  .loading_page.spinner::before,
  .loading_page.spinner::after,
  .loading_page.spinner.spinner-primary::before,
  .loading_page.spinner.spinner-primary::after {
    display:    none  !important;
    content:    none  !important;
    border:     none  !important;
    background: none  !important;
    animation:  none  !important;
  }

/* ----------------------------------------------------------
   NProgress page-transition spinner (top-right, route changes)
   Replace the CSS ring with the spinning logo.
   ---------------------------------------------------------- */
  #nprogress .spinner {
    top:   12px !important;
    right: 12px !important;
  }

  #nprogress .spinner-icon {
    width:         28px !important;
    height:        28px !important;
    border:        none !important;
    border-radius: 0    !important;
    background:    var(--app-logo-url, url('/images/logo.png'))
                   center / contain no-repeat !important;
    animation:     spin-logo 1s linear infinite !important;
    -webkit-animation: spin-logo 1s linear infinite !important;
  }

/* ----------------------------------------------------------
   #app fade-in (unchanged)
   ---------------------------------------------------------- */
  #app {
    animation:          app-fade-in 0.5s ease-out both;
    -webkit-animation:  app-fade-in 0.5s ease-out both;
  }

  @keyframes app-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);  }
  }

  @-webkit-keyframes app-fade-in {
    from { opacity: 0; -webkit-transform: translateY(8px); }
    to   { opacity: 1; -webkit-transform: translateY(0);  }
  }