body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #f4f6f8;
}

.app-skeleton {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f2f4f7;
}

.skeleton-sidebar {
  display: grid;
  grid-template-rows: 30px 9px 7px repeat(5, 34px) 1fr 42px;
  gap: 13px;
  width: 234px;
  flex: 0 0 234px;
  padding: 22px 15px 16px;
  background: #18212d;
}

.skeleton-mark { width: 112px; height: 27px; border-radius: 8px; }
.skeleton-line { width: 74px; height: 9px; border-radius: 4px; }
.skeleton-line.short { width: 46px; height: 7px; margin-top: -8px; }
.skeleton-nav { width: 100%; height: 34px; border-radius: 8px; }
.skeleton-nav.active { background-color: rgba(28, 166, 128, .26); }
.skeleton-user { align-self: end; width: 100%; height: 42px; border-radius: 9px; }

.skeleton-workspace { display: grid; min-width: 0; flex: 1; grid-template-rows: 65px minmax(0, 1fr); }
.skeleton-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid #e1e6eb; background: #fff; }
.skeleton-title { width: 118px; height: 20px; border-radius: 7px; }
.skeleton-control { width: 134px; height: 34px; border-radius: 9px; }
.skeleton-calendar { min-height: 0; padding: 16px; }
.skeleton-toolbar { display: flex; height: 48px; align-items: center; justify-content: space-between; border: 1px solid #e0e6eb; border-bottom: 0; border-radius: 12px 12px 0 0; padding: 0 14px; background: #fff; }
.skeleton-tabs { width: 212px; height: 27px; border-radius: 8px; }
.skeleton-filter { width: 83px; height: 27px; border-radius: 8px; }
.skeleton-grid { display: flex; min-height: 410px; overflow: hidden; border: 1px solid #e0e6eb; border-radius: 0 0 12px 12px; background: #fff; }
.skeleton-inventory { display: grid; grid-template-rows: 45px 30px repeat(2, 58px) 30px repeat(2, 58px); gap: 1px; width: 244px; flex: 0 0 244px; border-right: 1px solid #e8edf1; padding: 10px; background: #fbfcfd; }
.skeleton-search { height: 28px; border-radius: 7px; }
.skeleton-section { height: 20px; align-self: end; border-radius: 5px; }
.skeleton-row-label { height: 41px; border-radius: 7px; }
.skeleton-schedule { min-width: 0; flex: 1; overflow: hidden; }
.skeleton-days { display: grid; grid-template-columns: repeat(12, minmax(42px, 1fr)); height: 55px; border-bottom: 1px solid #e8edf1; }
.skeleton-day { position: relative; border-right: 1px solid #edf0f3; }
.skeleton-day:after { position: absolute; top: 12px; left: 50%; width: 13px; height: 8px; border-radius: 3px; background: #e3e9ee; content: ''; transform: translateX(-50%); }
.skeleton-bookings { position: relative; min-height: 355px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333% - 1px), #edf1f4 calc(8.333% - 1px), #edf1f4 8.333%), repeating-linear-gradient(0deg, transparent 0, transparent 57px, #edf1f4 57px, #edf1f4 58px); }
.skeleton-booking { position: absolute; left: 10%; height: 29px; border-radius: 7px; }
.skeleton-booking.medium { top: 22px; width: 28%; }
.skeleton-booking.long { top: 82px; left: 35%; width: 42%; }
.skeleton-booking.short { top: 141px; left: 19%; width: 20%; }
.skeleton-booking.lower { top: 258px; left: 51%; width: 31%; }

.skeleton-shimmer { background: linear-gradient(100deg, rgba(209, 219, 229, .7) 25%, rgba(240, 244, 248, .95) 40%, rgba(209, 219, 229, .7) 55%); background-size: 220% 100%; animation: skeleton-shimmer 1.45s ease-in-out infinite; }
.skeleton-sidebar .skeleton-shimmer { background: linear-gradient(100deg, rgba(74, 89, 107, .42) 25%, rgba(96, 112, 130, .62) 40%, rgba(74, 89, 107, .42) 55%); background-size: 220% 100%; }
/* A loading state never communicates booking status. Keep every placeholder
   neutral so it cannot be mistaken for a warning, downtime, or reservation. */
.skeleton-booking:nth-child(n) { background-color: #d7dfe7; }

@keyframes skeleton-shimmer { to { background-position: -220% 0; } }

html[data-theme='dark'] #loading-bg,
html[data-theme='dark'] .app-skeleton { background: #151b23; }
html[data-theme='dark'] .skeleton-sidebar { background: #111820; }
html[data-theme='dark'] .skeleton-topbar,
html[data-theme='dark'] .skeleton-toolbar,
html[data-theme='dark'] .skeleton-grid { border-color: #2b3542; background: #1b2430; }
html[data-theme='dark'] .skeleton-inventory { border-color: #2b3542; background: #19222d; }
html[data-theme='dark'] .skeleton-days { border-color: #2b3542; }
html[data-theme='dark'] .skeleton-day { border-color: #26313e; }
html[data-theme='dark'] .skeleton-day:after { background: #364454; }
html[data-theme='dark'] .skeleton-bookings { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(8.333% - 1px), #26313e calc(8.333% - 1px), #26313e 8.333%), repeating-linear-gradient(0deg, transparent 0, transparent 57px, #26313e 57px, #26313e 58px); }
html[data-theme='dark'] .skeleton-shimmer { background: linear-gradient(100deg, #293543 25%, #3a495a 40%, #293543 55%); background-size: 220% 100%; }
html[data-theme='dark'] .skeleton-sidebar .skeleton-shimmer { background: linear-gradient(100deg, #202b37 25%, #303e4e 40%, #202b37 55%); background-size: 220% 100%; }

@media (max-width: 760px) {
  .skeleton-sidebar { display: none; }
  .skeleton-topbar { height: 58px; padding: 0 16px; }
  .skeleton-calendar { padding: 10px; }
  .skeleton-inventory { width: 116px; flex-basis: 116px; padding: 7px; }
  .skeleton-tabs { width: 128px; }
  .skeleton-grid { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) { .skeleton-shimmer { animation: none; } }