/* ============================================================
   AHABA Journal of Creative Arts - Main Stylesheet
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
.font-serif {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Line Clamp */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Transitions */
.transition-fast { transition: all 0.15s ease; }
.transition { transition: all 0.3s ease; }
.transition-slow { transition: all 0.5s ease; }

/* Card Hover Effects */
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 76, 129, 0.1);
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
    background: rgba(15, 76, 129, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 76, 129, 0.2);
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading Spinner */
.spinner {
    border: 3px solid #e5e7eb;
    border-top-color: #0F4C81;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-leave {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Print Styles */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { text-decoration: underline; color: #000; }
}

/* Focus Styles */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid #0F4C81;
    outline-offset: 2px;
}

/* Button Base */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium text-sm transition;
}

.btn-primary {
    @apply bg-primary-500 text-white hover:bg-primary-600 focus:ring-4 focus:ring-primary-200;
}

.btn-emerald {
    @apply bg-emerald-500 text-white hover:bg-emerald-600 focus:ring-4 focus:ring-emerald-200;
}

.btn-outline {
    @apply border border-gray-300 text-gray-700 hover:bg-gray-50;
}

.btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Table Styles */
.table-container {
    @apply overflow-x-auto bg-white rounded-xl shadow-sm border border-gray-100;
}

.table-container table {
    @apply w-full text-left;
}

.table-container th {
    @apply px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50 border-b border-gray-100;
}

.table-container td {
    @apply px-4 py-3 text-sm text-gray-700 border-b border-gray-50;
}

.table-container tr:hover td {
    @apply bg-gray-50;
}

/* Form Styles */
.form-input {
    @apply w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-error {
    @apply text-red-500 text-xs mt-1;
}

/* Card */
.card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-100;
}

.card-body {
    @apply p-6;
}

/* Badge */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary { @apply bg-primary-100 text-primary-700; }
.badge-emerald { @apply bg-emerald-100 text-emerald-700; }
.badge-yellow { @apply bg-yellow-100 text-yellow-700; }
.badge-red { @apply bg-red-100 text-red-700; }
.badge-gray { @apply bg-gray-100 text-gray-700; }
.badge-blue { @apply bg-blue-100 text-blue-700; }

/* Pagination */
.pagination {
    @apply flex items-center justify-center space-x-1 mt-6;
}

.pagination a, .pagination span {
    @apply px-3 py-2 text-sm rounded-lg transition;
}

.pagination a {
    @apply text-gray-700 hover:bg-gray-100;
}

.pagination .active {
    @apply bg-primary-500 text-white;
}

.pagination .disabled {
    @apply text-gray-400 cursor-not-allowed;
}

/* Responsive iframe */
.responsive-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.responsive-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Progress Bar */
.progress-bar {
    @apply h-2 bg-gray-200 rounded-full overflow-hidden;
}

.progress-bar-fill {
    @apply h-full bg-primary-500 rounded-full transition-all duration-500;
}

/* Dropdown */
.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border z-50 opacity-0 invisible transition-all;
}

.dropdown-menu.open {
    @apply opacity-100 visible;
}