/* ============================================================
   Skeleton Loader CSS
   Restaurant ERP - Shimmer animation for all loading states
   ============================================================ */

/* Base shimmer animation */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0ebe4 25%, #e8e0d5 50%, #f0ebe4 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* Skeleton line (text replacement) */
.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0ebe4 25%, #e8e0d5 50%, #f0ebe4 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-line.w-25  { width: 25%; }
.skeleton-line.w-40  { width: 40%; }
.skeleton-line.w-60  { width: 60%; }
.skeleton-line.w-75  { width: 75%; }
.skeleton-line.w-100 { width: 100%; }
.skeleton-line.short { height: 10px; }
.skeleton-line.tall  { height: 20px; }

/* Skeleton block (box replacement) */
.skeleton-block {
  border-radius: 6px;
  background: linear-gradient(90deg, #f0ebe4 25%, #e8e0d5 50%, #f0ebe4 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* Skeleton circle (avatar replacement) */
.skeleton-circle {
  border-radius: 50%;
  background: linear-gradient(90deg, #f0ebe4 25%, #e8e0d5 50%, #f0ebe4 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ---- STAT CARD SKELETON ---- */
.skeleton-stat-card {
  background: #fff;
  border: 1px solid #e8e0d5;
  border-radius: 10px;
  padding: 20px;
}
.skeleton-stat-card .skeleton-icon  { width: 40px; height: 40px; border-radius: 8px; margin-bottom: 14px; }
.skeleton-stat-card .skeleton-value { height: 24px; width: 60%; margin-bottom: 8px; }
.skeleton-stat-card .skeleton-label { height: 12px; width: 80%; }

/* ---- TABLE ROW SKELETON ---- */
.skeleton-table-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0ebe4;
}
.skeleton-table-row .skeleton-cell {
  height: 14px;
  border-radius: 4px;
  flex: 1;
}
.skeleton-table-row .skeleton-cell.narrow { flex: 0 0 60px; }
.skeleton-table-row .skeleton-cell.medium { flex: 0 0 100px; }
.skeleton-table-row .skeleton-badge {
  height: 22px;
  width: 60px;
  border-radius: 20px;
  flex-shrink: 0;
}
.skeleton-table-row .skeleton-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.skeleton-table-row .skeleton-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

/* ---- MENU TILE SKELETON ---- */
.skeleton-menu-tile {
  background: #fff;
  border: 2px solid #f0ebe4;
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.skeleton-menu-tile .skeleton-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  margin: 0 auto 10px;
}
.skeleton-menu-tile .skeleton-name  { height: 12px; width: 80%; margin: 0 auto 6px; }
.skeleton-menu-tile .skeleton-price { height: 14px; width: 50%; margin: 0 auto; }

/* ---- KOT CARD SKELETON ---- */
.skeleton-kot-card {
  background: #fff;
  border: 2px solid #f0ebe4;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.skeleton-kot-header {
  background: #f0ebe4;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.skeleton-kot-header .skeleton-title { height: 16px; width: 40%; }
.skeleton-kot-header .skeleton-badge { height: 22px; width: 60px; border-radius: 20px; }
.skeleton-kot-body { padding: 12px 14px; }
.skeleton-kot-item { display: flex; justify-content: space-between; margin-bottom: 8px; }
.skeleton-kot-item .skeleton-name  { height: 13px; width: 55%; }
.skeleton-kot-item .skeleton-qty   { height: 13px; width: 15%; }
.skeleton-kot-item .skeleton-btn   { height: 30px; width: 80px; border-radius: 6px; margin-top: 10px; }

/* ---- CARD SKELETON (generic) ---- */
.skeleton-card {
  background: #fff;
  border: 1px solid #e8e0d5;
  border-radius: 10px;
  padding: 18px;
}
.skeleton-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.skeleton-card-header .skeleton-title { height: 16px; width: 40%; }
.skeleton-card-header .skeleton-btn   { height: 28px; width: 80px; border-radius: 6px; }

/* ---- TABLE GRID SKELETON ---- */
.skeleton-table-tile {
  background: #fff;
  border: 2px solid #f0ebe4;
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
}
.skeleton-table-tile .skeleton-dot  { width: 10px; height: 10px; border-radius: 50%; margin: 6px auto; }
.skeleton-table-tile .skeleton-name { height: 14px; width: 60%; margin: 0 auto 6px; }
.skeleton-table-tile .skeleton-cap  { height: 10px; width: 40%; margin: 0 auto; }

/* ---- FORM SKELETON ---- */
.skeleton-form-group { margin-bottom: 18px; }
.skeleton-form-group .skeleton-label { height: 12px; width: 30%; margin-bottom: 6px; }
.skeleton-form-group .skeleton-input { height: 38px; border-radius: 6px; }

/* ---- PAGE LOADER (full page) ---- */
.page-skeleton-loader { padding: 20px; }
.page-skeleton-loader .skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-skeleton-loader .skeleton-header .skeleton-title { height: 22px; width: 200px; }
.page-skeleton-loader .skeleton-header .skeleton-btn   { height: 36px; width: 120px; border-radius: 8px; }

/* Overlay loader (used during AJAX calls) */
.ajax-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: all;
}
.ajax-loader-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8B1A1A, #D4AF37, #8B1A1A);
  background-size: 200% 100%;
  animation: slideBar 1s infinite linear;
  z-index: 9998;
}
@keyframes slideBar {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Button loading state */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Inline content loader */
.content-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  flex-direction: column;
  gap: 14px;
  color: #a09080;
  font-size: 13px;
}
.content-loader .spinner-border {
  width: 28px;
  height: 28px;
  border-width: 2px;
  color: #8B1A1A;
}

/* ---- GLOBAL PAGE TRANSITION SKELETON OVERLAY ---- */
.global-skeleton-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(2px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.global-skeleton-overlay.active {
  opacity: 1;
  visibility: visible;
}
.global-skeleton-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 260px;
}
.global-skeleton-loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8B1A1A, #D4AF37, #28a745, #8B1A1A);
  background-size: 300% 100%;
  animation: slideBar 1.2s infinite linear;
  z-index: 100000;
}