html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}
:root {
  --app-height: 100vh;
}
@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}
#app {
  min-height: var(--app-height);
}
/* every screen (auth, dashboard, admin panel, client page) renders its root
   container with Tailwind's h-screen (100vh). On mobile browsers 100vh can be
   taller than the actually-visible area (it doesn't account for the address
   bar), which pushes the bottom compose bar off-screen. Overriding it to the
   dynamic viewport unit keeps it matched to what's really visible. */
.h-screen {
  height: 100vh;
  height: var(--app-height);
}
.overflow-y-auto {
  overscroll-behavior: contain;
}
body {
  font-family: "Cairo", sans-serif;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background: #d8cfbf;
  border-radius: 10px;
}
.tape-strip {
  height: 6px;
  opacity: 0.55;
  background-image: repeating-linear-gradient(90deg, #c9922e 0px, #c9922e 2px, transparent 2px, transparent 9px);
}

/* ---------- launch splash screen (index.html / client.html) ---------- */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2724;
  overflow: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.splash-screen.splash-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* subtle diagonal stripe texture behind the logo, slowly drifting */
.splash-stripes {
  position: absolute;
  inset: -50px;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 18px, transparent 18px, transparent 42px);
  animation: splashStripesMove 14s linear infinite;
}
@keyframes splashStripesMove {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(84px, 84px);
  }
}
.splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}
.splash-logo-wrap {
  width: 112px;
  height: 112px;
  margin-bottom: 22px;
  animation: splashLogoPop 0.7s cubic-bezier(0.25, 1.4, 0.4, 1) both;
  filter: drop-shadow(0 18px 32px rgba(201, 146, 46, 0.4));
}
.splash-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 24px;
}
@keyframes splashLogoPop {
  0% {
    transform: scale(0.4) translateY(18px);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) translateY(-4px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.splash-title-en {
  font-family: "Cairo", sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #c9922e;
  letter-spacing: 0.3px;
  margin: 0;
  opacity: 0;
  animation: splashTextIn 0.6s ease 0.35s both;
}
.splash-title-ar {
  font-family: "Cairo", sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #efe9dc;
  margin: 4px 0 0;
  opacity: 0;
  animation: splashTextIn 0.6s ease 0.5s both;
}
@keyframes splashTextIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.splash-loader {
  margin-top: 26px;
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  opacity: 0;
  animation: splashTextIn 0.5s ease 0.65s both;
}
.splash-loader::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: #c9922e;
  border-radius: 3px;
  animation: splashLoaderSlide 1.1s ease-in-out infinite;
}
@keyframes splashLoaderSlide {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(130%);
  }
  100% {
    transform: translateX(280%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash-stripes,
  .splash-logo-wrap,
  .splash-title-en,
  .splash-title-ar,
  .splash-loader,
  .splash-loader::after {
    animation: none;
    opacity: 1;
  }
}