/* ==========================================================
   WISAXIS — UTILITIES & PRINT HELPERS
   Helper classes, animations, accessibility utilities, print styles.
   ========================================================== */

/* ===== DISPLAY & VISIBILITY ===== */
.hidden    { display: none !important; }
.visible   { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.block     { display: block; }
.inline-block { display: inline-block; }

/* ===== SCREEN READER ACCESSIBILITY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== RESPONSIVE DISPLAY ===== */
.mobile-only { display: block; }
.desktop-only { display: none; }

@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: block !important; }
}

/* ===== TEXT ALIGNMENT & COLOR ===== */
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }

.text-main     { color: var(--text-main) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-primary  { color: var(--primary) !important; }
.text-accent   { color: var(--accent) !important; }
.text-success  { color: var(--success) !important; }
.text-danger   { color: var(--danger) !important; }
.text-warning  { color: var(--warning) !important; }

/* ===== FONT WEIGHTS ===== */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black    { font-weight: 900; }

/* ===== FLEXBOX & GRID HELPERS ===== */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-start    { display: flex; align-items: flex-start; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ===== BADGES & PILLS ===== */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.badge-success {
  background: var(--success-light);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.25);
}

.badge-accent {
  background: var(--accent-light);
  color: var(--accent);
  border-color: rgba(6, 182, 212, 0.25);
}

/* ===== SKELETON & ANIMATIONS ===== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.92); }
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.skeleton-loader {
  animation: shimmer 1.6s infinite linear !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  background-size: 1000px 100% !important;
  color: transparent !important;
  user-select: none !important;
}

html[data-theme="light"] .skeleton-loader {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 100%
  ) !important;
}

/* ===== MOBILE ERGONOMICS & TOUCH UTILITIES ===== */
.touch-target {
  min-height: var(--touch-target-min, 44px);
  min-width: var(--touch-target-min, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.touch-target-lg {
  min-height: var(--touch-target-large, 48px);
  min-width: var(--touch-target-large, 48px);
}

.safe-bottom-pad {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
}

.safe-top-pad {
  padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
}

.scroll-snap-x {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scroll-snap-x::-webkit-scrollbar {
  display: none;
}

.scroll-snap-item {
  scroll-snap-align: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }

  .mobile-gap-sm {
    gap: var(--space-2) !important;
  }

  .mobile-p-sm {
    padding: var(--space-3) !important;
  }
}

/* ===== GLOBAL OVERFLOW PREVENTER ===== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
}

/* ===== A4 RESUME SCALING CONTAINER ===== */
.resume-wrapper {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.resume-page {
  width: min(100vw - 24px, 210mm);
  aspect-ratio: 210 / 297;
}

/* ===== PRINT STYLES ===== */
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  .template-scroll,
  .template-track,
  .template-thumb,
  .btn,
  .app-header,
  .app-footer,
  .resume-actions,
  .download-btn,
  .toast-container,
  .global-bg {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .section,
  .experience-item,
  .education-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  * {
    animation: none !important;
    transition: none !important;
  }

  .page,
  .resume-page {
    width: 210mm;
    height: 297mm;
    page-break-after: always;
    border-radius: 0;
    box-shadow: none;
  }
}