/* ============================================================
   GaleraLink — Universal Skeleton Loading Screen
   Shared across GL_TOURIST, GL_OPERATOR, GL_GUIDE, GL_ADMIN/STAFF
   ============================================================ */

body.gl-loading {
  overflow: hidden !important;
}
body.gl-loading > *:not(#gl-skeleton-overlay) {
  visibility: hidden !important;
}

#gl-skeleton-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0a1628;
  display: flex;
  flex-direction: column;
  visibility: visible !important;
  opacity: 1;
  transition: opacity .35s ease;
  font-family: -apple-system, "Plus Jakarta Sans", "DM Sans", Arial, sans-serif;
}
#gl-skeleton-overlay.gl-skel-fade {
  opacity: 0;
  pointer-events: none;
}

.gl-skel-shimmer {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}
.gl-skel-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: gl-skel-sweep 1.4s ease-in-out infinite;
}
@keyframes gl-skel-sweep {
  100% { transform: translateX(100%); }
}

/* ---- Top navbar row (used by every layout) ---- */
.gl-skel-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.gl-skel-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
}
.gl-skel-topbar .gl-skel-line {
  height: 12px;
}
.gl-skel-nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
}
.gl-skel-nav-links .gl-skel-line {
  width: 56px;
}
.gl-skel-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-left: 18px;
  flex-shrink: 0;
}

.gl-skel-line { border-radius: 6px; }
.gl-skel-block { border-radius: 12px; }

/* ---- "topnav" layout: GL_TOURIST public-style pages ---- */
.gl-skel-body[data-gl-skel="topnav"] .gl-skel-main {
  flex: 1;
  padding: 32px clamp(16px, 6vw, 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.gl-skel-hero {
  height: clamp(140px, 24vw, 240px);
  width: 100%;
}
.gl-skel-title { height: 22px; width: min(50%, 320px); }
.gl-skel-subtitle { height: 13px; width: min(75%, 480px); }
.gl-skel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.gl-skel-grid .gl-skel-card {
  height: 150px;
}

/* ---- "sidebar" layout: GL_OPERATOR / GL_GUIDE / GL_ADMIN / GL_STAFF ----
   NOTE: uses the #gl-skeleton-overlay ID (not just the class/attribute)
   so it reliably beats the base #gl-skeleton-overlay{flex-direction:column}
   rule above — ID selectors always outrank class/attribute selectors on
   specificity, regardless of which rule appears later in the file. Without
   this, sidebar pages rendered as a single stacked column (sidebar on top,
   then a tall empty gap, then all the content pushed toward the bottom)
   instead of sidebar-left / content-right. */
#gl-skeleton-overlay[data-gl-skel="sidebar"] {
  flex-direction: row;
}
.gl-skel-sidebar {
  width: 240px;
  flex-shrink: 0;
  padding: 22px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-skel-sidebar .gl-skel-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.gl-skel-sidebar .gl-skel-line { height: 14px; }
.gl-skel-nav-item {
  height: 34px;
  margin-bottom: 4px;
}
.gl-skel-content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gl-skel-content {
  flex: 1;
  padding: 28px clamp(16px, 4vw, 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.gl-skel-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.gl-skel-stats-row .gl-skel-card { height: 84px; }
.gl-skel-table {
  flex: 1;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gl-skel-row {
  height: 16px;
  width: 100%;
}
.gl-skel-row:nth-child(3n+1) { width: 92%; }
.gl-skel-row:nth-child(3n+2) { width: 78%; }
.gl-skel-row:nth-child(3n)   { width: 85%; }

@media (max-width: 720px) {
  .gl-skel-sidebar { display: none; }
  .gl-skel-nav-links { display: none; }
}

/* ============================================================
   Per-page CONTENT variants — selected via [data-gl-skel-page]
   Layered on top of either "topnav" or "sidebar" chrome above,
   so each real page gets a skeleton that matches its actual
   content shape instead of one generic template for everything.
   ============================================================ */

/* ---- toolbar row: search box + filter pill + action button
        (used by "table" pages: activity, queue, reports, users, history) ---- */
.gl-skel-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.gl-skel-toolbar .gl-skel-search { height: 38px; flex: 1; max-width: 320px; }
.gl-skel-toolbar .gl-skel-pill   { height: 38px; width: 96px; }
.gl-skel-toolbar .gl-skel-btn    { height: 38px; width: 120px; margin-left: auto; }

/* wider table for "table"-type pages (more rows, header row) */
.gl-skel-table-header {
  display: flex;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 4px;
}
.gl-skel-table-header .gl-skel-line { height: 11px; width: 90px; opacity: .6; }

/* ---- form layout: label + input pairs
        (used by: settings, profile, register, signup, booking form, feedback) ---- */
.gl-skel-form {
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 auto;
}
.gl-skel-field { display: flex; flex-direction: column; gap: 8px; }
.gl-skel-field .gl-skel-label { height: 11px; width: 100px; opacity: .55; }
.gl-skel-field .gl-skel-input { height: 42px; width: 100%; }
.gl-skel-form-row { display: flex; gap: 16px; }
.gl-skel-form-row .gl-skel-field { flex: 1; }
.gl-skel-form .gl-skel-submit { height: 44px; width: 160px; margin-top: 6px; }

/* ---- centered auth card (login/signup/forgot-password) — no full chrome ---- */
.gl-skel-auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gl-skel-auth-card {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.gl-skel-auth-card .gl-skel-logo { width: 56px; height: 56px; }
.gl-skel-auth-card .gl-skel-title { height: 18px; width: 65%; }
.gl-skel-auth-card .gl-skel-form { gap: 16px; }

/* ---- detail view: media block + info lines + side panel
        (used by: booking-details, booking-detail) ---- */
.gl-skel-detail {
  display: flex;
  gap: 28px;
  flex: 1;
  min-height: 0;
}
.gl-skel-detail-media { width: 42%; max-width: 380px; border-radius: 14px; }
.gl-skel-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.gl-skel-detail-info .gl-skel-line:nth-child(1) { height: 20px; width: 55%; }
@media (max-width: 720px) {
  .gl-skel-detail { flex-direction: column; }
  .gl-skel-detail-media { width: 100%; max-width: none; height: 160px; }
}

/* ---- list/feed: avatar + two lines per row
        (used by: notifications, messages, feedback, my-bookings) ---- */
.gl-skel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
.gl-skel-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  flex-shrink: 0;
}
.gl-skel-list-item .gl-skel-avatar { margin-left: 0; }
.gl-skel-list-item-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.gl-skel-list-item-lines .gl-skel-line:first-child { height: 13px; width: 45%; }
.gl-skel-list-item-lines .gl-skel-line:last-child   { height: 11px; width: 75%; opacity: .6; }

/* ---- text-heavy page: paragraph lines (terms, privacy, about) ---- */
.gl-skel-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.gl-skel-text .gl-skel-line { height: 12px; }
.gl-skel-text .gl-skel-line:nth-child(4n)   { width: 60%; }
.gl-skel-text .gl-skel-line:nth-child(4n+1) { width: 96%; }
.gl-skel-text .gl-skel-line:nth-child(4n+2) { width: 88%; }
.gl-skel-text .gl-skel-line:nth-child(4n+3) { width: 92%; }

/* ---- plain card grid without hero (boats.php-style gallery) ---- */
.gl-skel-plain-grid .gl-skel-grid .gl-skel-card { height: 190px; }

/* ============================================================
   Recipe-engine block primitives (added for per-page accurate
   skeletons — these compose in whatever order a page's real
   layout uses, instead of one fixed template per "page type").
   ============================================================ */
.gl-skel-tabs { display: flex; gap: 10px; flex-shrink: 0; }
.gl-skel-tabs .gl-skel-tab { height: 34px; width: 90px; border-radius: 20px; }

.gl-skel-profile-header {
  display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.gl-skel-profile-header .gl-skel-avatar-lg { width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0; }
.gl-skel-profile-header-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gl-skel-profile-header-lines .gl-skel-line:first-child { height: 16px; width: 45%; }
.gl-skel-profile-header-lines .gl-skel-line:last-child { height: 11px; width: 30%; opacity: .6; }

.gl-skel-inforows {
  display: flex; flex-direction: column; gap: 14px;
}
.gl-skel-inforow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gl-skel-inforow .gl-skel-line:first-child { height: 11px; width: 90px; opacity: .55; }
.gl-skel-inforow .gl-skel-line:last-child { height: 13px; width: 40%; }

.gl-skel-idcard {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: 14px; background: rgba(255,255,255,.03);
  flex-shrink: 0;
}
.gl-skel-idcard .gl-skel-idcard-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.gl-skel-idcard-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.gl-skel-idcard-lines .gl-skel-line:first-child { height: 13px; width: 55%; }
.gl-skel-idcard-lines .gl-skel-line:last-child { height: 10px; width: 35%; opacity: .55; }
.gl-skel-idcard .gl-skel-badge { height: 24px; width: 74px; border-radius: 20px; flex-shrink: 0; }

.gl-skel-section-header { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.gl-skel-section-header .gl-skel-line:first-child { height: 17px; width: 40%; }
.gl-skel-section-header .gl-skel-line:last-child { height: 11px; width: 60%; opacity: .55; }

.gl-skel-block-gap { height: 4px; }

/* ============================================================
   Login / Forgot-password card skeleton
   Page type: data-gl-skel-page="login-form"
   Recipe block: ["loginCard"]

   Mirrors the real auth card: eyebrow + title, the social sign-in
   button, an "or" divider, two labelled inputs, the remember /
   forgot row, the submit button, and the footer link.
   (Logout deliberately has NO skeleton — it redirects straight to
   the login page, whose own skeleton covers the transition.)
   ============================================================ */
.gl-skel-login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gl-skel-login-card {
  width: 100%;
  max-width: 430px;
  padding: 34px 30px 30px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
  display: flex;
  flex-direction: column;
}

/* header */
.gl-skel-login-card .gl-skel-lg-eyebrow { height: 13px; width: 30%; opacity: .55; }
.gl-skel-login-card .gl-skel-lg-title   { height: 21px; width: 58%; margin-top: 12px; }

/* social sign-in button — the brightest block on the card */
.gl-skel-login-card .gl-skel-lg-oauth {
  height: 46px; width: 100%; margin-top: 24px; border-radius: 11px;
  background: rgba(255, 255, 255, .17);
}

/* "or" divider */
.gl-skel-lg-divider {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 20px;
}
.gl-skel-lg-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, .10); }
.gl-skel-lg-divider .gl-skel-lg-chip { height: 12px; width: 88px; flex-shrink: 0; opacity: .6; }

/* labelled inputs */
.gl-skel-login-card .gl-skel-field { margin-bottom: 15px; }
.gl-skel-login-card .gl-skel-field .gl-skel-label { height: 11px; width: 26%; }
.gl-skel-login-card .gl-skel-field .gl-skel-input { height: 44px; border-radius: 11px; }

/* remember-me / forgot-password row */
.gl-skel-lg-meta { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; }
.gl-skel-lg-meta .gl-skel-lg-box      { height: 13px; width: 13px; border-radius: 4px; flex-shrink: 0; }
.gl-skel-lg-meta .gl-skel-lg-remember { height: 11px; width: 108px; opacity: .55; }
.gl-skel-lg-meta .gl-skel-lg-forgot   { height: 11px; width: 132px; margin-left: auto; opacity: .55; }

/* submit + footer link */
.gl-skel-login-card .gl-skel-lg-submit {
  height: 48px; width: 100%; margin-top: 18px; border-radius: 11px;
  background: rgba(255, 255, 255, .15);
}
.gl-skel-login-card .gl-skel-lg-footer {
  height: 12px; width: 62%; margin: 22px auto 0; opacity: .5;
}

@media (max-width: 480px) {
  .gl-skel-login-card { padding: 26px 20px 24px; border-radius: 18px; }
  .gl-skel-login-card .gl-skel-lg-title { width: 70%; }
}


/* ============================================================
   Signup card skeleton
   Page type: data-gl-skel-page="signup-form"
   Recipe block: ["signupCard"]

   Same card as the login shape, one row taller: paired first/last
   name fields, three more inputs, a bare confirm field, and the
   terms checkbox in place of the remember/forgot row.
   ============================================================ */
.gl-skel-signup-card { max-width: 470px; }

/* first name / last name side by side */
.gl-skel-signup-card .gl-skel-form-row { display: flex; gap: 14px; }
.gl-skel-signup-card .gl-skel-form-row .gl-skel-field { flex: 1; min-width: 0; }
.gl-skel-signup-card .gl-skel-form-row .gl-skel-label { width: 48%; }

/* the confirm field carries no label of its own */
.gl-skel-signup-card .gl-skel-field-bare { margin-top: -2px; }

/* terms checkbox row */
.gl-skel-lg-meta .gl-skel-lg-terms { height: 11px; width: 218px; opacity: .55; }

@media (max-width: 480px) {
  .gl-skel-signup-card .gl-skel-form-row { flex-direction: column; gap: 0; }
}