/* Al Qadr Platform - Global Styles */

* {
  box-sizing: border-box;
}

body {
  background-color: #fef9f2;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.perspective-text {
  text-wrap: balance;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.bento-item-large {
  grid-column: span 2;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid #E2E8F0;
}

/* Page transitions */
.page-transition {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

/* Button styles */
.btn-primary {
  @apply bg-primary text-on-primary font-title-lg text-title-lg rounded-xl shadow-md active:scale-[0.98] transition-transform;
}

.btn-secondary {
  @apply border border-secondary text-secondary font-title-lg text-title-lg rounded-xl hover:bg-secondary-container transition-colors;
}

/* Input styles */
.input-field {
  @apply w-full px-4 py-3 border border-outline-variant rounded-xl bg-surface-container-lowest text-on-surface font-body-md focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all;
}

/* Card styles */
.card {
  @apply bg-surface-container-lowest border border-outline-variant rounded-2xl shadow-sm transition-all hover:shadow-md;
}

/* Utility classes for spacing */
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 40px; }

.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 40px; }

.px-xs { padding-left: 4px; padding-right: 4px; }
.px-sm { padding-left: 8px; padding-right: 8px; }
.px-md { padding-left: 16px; padding-right: 16px; }
.px-lg { padding-left: 24px; padding-right: 24px; }
.px-xl { padding-left: 40px; padding-right: 40px; }

.py-xs { padding-top: 4px; padding-bottom: 4px; }
.py-sm { padding-top: 8px; padding-bottom: 8px; }
.py-md { padding-top: 16px; padding-bottom: 16px; }
.py-lg { padding-top: 24px; padding-bottom: 24px; }
.py-xl { padding-top: 40px; padding-bottom: 40px; }


/* Role Switcher Modal Animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}