/* ==========================================================================
   KAMAR SKELETON LOADING SYSTEM v1
   Generic, unscoped utility: gate any element that will be filled/decided by
   an async data fetch (Supabase status, facility access, dashboard stats,
   etc). Prevents "flash of wrong default state" -> browser blocks first
   paint on elements carrying this class (external stylesheet, blocking),
   so the visitor never sees the placeholder/default text before the real
   value. Pair with KamarUI.reveal(el) in kamar-ui.js once data resolves.
   Works on ANY page regardless of theme/body class -- no scoping needed.
   ========================================================================== */

.kamar-skel-gate{
  position:relative;
  color:transparent!important;
  border-color:rgba(255,255,255,.08)!important;
  pointer-events:none!important;
  user-select:none!important;
  overflow:hidden;
}
.kamar-skel-gate *{
  visibility:hidden!important;
}
.kamar-skel-gate::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.13) 37%,
    rgba(255,255,255,.05) 63%);
  background-size:400% 100%;
  animation:kamarSkelShimmer 1.4s ease infinite;
  pointer-events:none;
}
@keyframes kamarSkelShimmer{
  0%{ background-position:100% 0; }
  100%{ background-position:0 0; }
}

.kamar-skel-revealed{
  color:inherit!important;
  pointer-events:auto!important;
  user-select:auto!important;
  animation:kamarSkelFadeIn .25s ease;
}
.kamar-skel-revealed *{
  visibility:visible!important;
}
.kamar-skel-revealed::after{
  display:none!important;
}
@keyframes kamarSkelFadeIn{
  from{ opacity:.35; }
  to{ opacity:1; }
}

/* Light-theme pages (homepage/marketing) need a darker-on-light shimmer */
.kamar-skel-gate.kamar-skel-light::after{
  background:linear-gradient(90deg,
    rgba(0,0,0,.05) 25%,
    rgba(0,0,0,.11) 37%,
    rgba(0,0,0,.05) 63%);
  background-size:400% 100%;
}

@media (prefers-reduced-motion: reduce){
  .kamar-skel-gate::after{ animation:none; }
}

/* ==========================================================================
   KAMAR CARD REVEAL v1
   Generic, unscoped click-to-expand for info/action cards (works on ANY
   page/viewport, no body-class or media-query needed -- same convention
   as .kamar-skel-gate above). Pair with the click-delegate toggle in
   kamar-ui.js (KAMAR_REVEAL_CARD block).
   Markup: <button type="button" class="kamar-reveal-head">
             <span class="kamar-reveal-summary">...closed-state summary...</span>
             <span class="kamar-reveal-arrow">&rsaquo;</span>
           </button>
           <div class="kamar-reveal-body">...full detail...</div>
   Collapsed (max-height:0) by default. Each card toggles independently.
   ========================================================================== */
.kamar-reveal-head{
  display:flex!important; align-items:center!important; justify-content:space-between!important;
  gap:12px!important; width:100%!important; text-align:left!important; background:none!important;
  border:0!important; cursor:pointer!important; font:inherit!important; padding:10px 0!important;
  margin-top:4px!important;
}
.kamar-reveal-summary{ font-size:13px!important; font-weight:800!important; opacity:.85!important; }
.kamar-reveal-arrow{ flex:0 0 auto!important; opacity:.55!important; transition:transform .2s ease!important; font-size:18px!important; line-height:1!important; }
.kamar-reveal-head.open .kamar-reveal-arrow{ transform:rotate(90deg)!important; opacity:1!important; }
.kamar-reveal-body{ max-height:0; overflow:hidden!important; transition:max-height .25s ease!important; }