/* ============================================================
   Tecmocsy Skeleton Loading System
   Usage: add class "tecmocsy-skeleton" to any placeholder el.
   ============================================================ */

/* ── Shimmer keyframe ───────────────────────────────────────── */
@keyframes tmc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── Base shimmer class ─────────────────────────────────────── */
.tecmocsy-skeleton {
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 50%,
    #e5e7eb 75%
  );
  background-size: 200% 100%;
  animation: tmc-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  display: block;
}

/* ── Show / hide helpers ────────────────────────────────────── */
.tmc-skeleton-wrap {
  transition: opacity 0.3s ease;
}

.tmc-content-hidden {
  opacity: 0 !important;
  pointer-events: none;
  user-select: none;
}

.tmc-skeleton-hidden {
  display: none !important;
}

/* ============================================================
   CARD skeleton  (product grid)
   ============================================================ */
.tmc-sk-card {
  background: #fff;
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
/* 4:3 image area — mirrors the real product card */
.tmc-sk-card__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 3px;
}
.tmc-sk-card__title {
  height: 13px;
  width: 80%;
  margin-top: 8px;
  border-radius: 3px;
}
.tmc-sk-card__sub {
  height: 11px;
  width: 60%;
  margin-top: 5px;
  border-radius: 3px;
}
.tmc-sk-card__price {
  height: 16px;
  width: 45%;
  margin-top: 8px;
  border-radius: 3px;
}
.tmc-sk-card__btn {
  height: 34px;
  width: 100%;
  margin-top: 12px;
  border-radius: 6px;
}

/* ============================================================
   LIST ITEM skeleton  (orders, tables)
   ============================================================ */
.tmc-sk-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}
.tmc-sk-list-item__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
}
.tmc-sk-list-item__body {
  flex: 1;
  min-width: 0;
}
.tmc-sk-list-item__line1 {
  height: 13px;
  width: 80%;
  border-radius: 3px;
}
.tmc-sk-list-item__line2 {
  height: 11px;
  width: 55%;
  margin-top: 8px;
  border-radius: 3px;
}
.tmc-sk-list-item__right {
  flex-shrink: 0;
  width: 64px;
  height: 13px;
  border-radius: 3px;
}

/* ============================================================
   TEXT BLOCK skeleton  (paragraphs, descriptions)
   ============================================================ */
.tmc-sk-text__line {
  height: 12px;
  margin-bottom: 9px;
  border-radius: 3px;
}
.tmc-sk-text__line:nth-child(1) { width: 100%; }
.tmc-sk-text__line:nth-child(2) { width: 95%; }
.tmc-sk-text__line:nth-child(3) { width: 88%; }
.tmc-sk-text__line:nth-child(4) { width: 92%; }
.tmc-sk-text__line:nth-child(5) { width: 60%; }

/* ============================================================
   HERO / BANNER skeleton
   ============================================================ */
.tmc-sk-hero {
  position: relative;
  height: 280px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.tmc-sk-hero__title {
  position: absolute;
  bottom: 44px;
  left: 24px;
  height: 22px;
  width: 45%;
  border-radius: 4px;
}
.tmc-sk-hero__sub {
  position: absolute;
  bottom: 16px;
  left: 24px;
  height: 14px;
  width: 30%;
  border-radius: 3px;
}

/* ============================================================
   FORM skeleton
   ============================================================ */
.tmc-sk-form__label {
  height: 12px;
  width: 32%;
  margin-bottom: 7px;
  border-radius: 3px;
}
.tmc-sk-form__input {
  height: 42px;
  width: 100%;
  border-radius: 6px;
  margin-bottom: 18px;
}

/* ============================================================
   NAVIGATION skeleton
   ============================================================ */
.tmc-sk-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
}
.tmc-sk-nav__logo {
  height: 28px;
  width: 110px;
  border-radius: 4px;
}
.tmc-sk-nav__link {
  height: 12px;
  width: 60px;
  border-radius: 3px;
}

/* ============================================================
   AVATAR / PROFILE skeleton
   ============================================================ */
.tmc-sk-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tmc-sk-avatar__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tmc-sk-avatar__lines {
  flex: 1;
}
.tmc-sk-avatar__name {
  height: 13px;
  width: 120px;
  border-radius: 3px;
}
.tmc-sk-avatar__meta {
  height: 11px;
  width: 80px;
  margin-top: 8px;
  border-radius: 3px;
}

/* ============================================================
   Responsive adjustments
   ============================================================ */
@media (max-width: 640px) {
  .tmc-sk-hero         { height: 200px; }
  .tmc-sk-card__img    { height: 140px; }
}

/* ============================================================
   Dark mode (if ever adopted — no-op for now)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .tecmocsy-skeleton {
    background: linear-gradient(
      90deg,
      #374151 25%,
      #4b5563 50%,
      #374151 75%
    );
    background-size: 200% 100%;
  }
  .tmc-sk-card         { background: #1f2937; }
  .tmc-sk-list-item    { border-bottom-color: #374151; }
}