/* MangaLint Pro — Global Styles */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1b1e; }
::-webkit-scrollbar-thumb { background: #414348; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #595b63; }

/* Focus ring */
*:focus-visible {
    outline: 2px solid #E8372A;
    outline-offset: 2px;
}

/* Button base */
.btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all duration-150;
}
.btn-primary {
    @apply bg-redline text-white hover:bg-redline-600 active:scale-[0.98];
}
.btn-secondary {
    @apply bg-ink-800 text-ink-100 border border-ink-700 hover:border-ink-500 active:scale-[0.98];
}
.btn-ghost {
    @apply text-ink-400 hover:text-ink-100 hover:bg-ink-800;
}

/* Card */
.card {
    @apply bg-ink-900 border border-ink-800 rounded-xl;
}

/* Badge */
.badge {
    @apply inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full;
}
.badge-red { @apply bg-redline/10 text-redline; }
.badge-orange { @apply bg-orange-500/10 text-orange-400; }
.badge-yellow { @apply bg-yellow-500/10 text-yellow-400; }
.badge-blue { @apply bg-blue-500/10 text-blue-400; }
.badge-green { @apply bg-green-500/10 text-green-400; }
.badge-gray { @apply bg-ink-700 text-ink-300; }

/* Severity colors for suggestions */
.sev-critical { @apply border-l-4 border-l-red-500 bg-red-500/5; }
.sev-major { @apply border-l-4 border-l-orange-500 bg-orange-500/5; }
.sev-minor { @apply border-l-4 border-l-yellow-500 bg-yellow-500/5; }
.sev-info { @apply border-l-4 border-l-blue-500 bg-blue-500/5; }

/* Highlight marks in annotated text */
mark[data-severity="critical"] { background: rgba(239, 68, 68, 0.2); border-bottom: 2px solid #ef4444; cursor: pointer; }
mark[data-severity="major"] { background: rgba(249, 115, 22, 0.15); border-bottom: 2px solid #f97316; cursor: pointer; }
mark[data-severity="minor"] { background: rgba(234, 179, 8, 0.1); border-bottom: 2px solid #eab308; cursor: pointer; }
mark[data-severity="info"] { background: rgba(59, 130, 246, 0.1); border-bottom: 2px solid #3b82f6; cursor: pointer; }

/* MQM score colors */
.mqm-a { @apply text-green-400; }
.mqm-b { @apply text-blue-400; }
.mqm-c { @apply text-yellow-400; }
.mqm-d { @apply text-orange-400; }
.mqm-f { @apply text-red-400; }

/* Toast notification */
.toast {
    @apply fixed bottom-4 right-4 z-[9999] px-4 py-3 rounded-lg shadow-xl text-sm font-medium;
    animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
}
.toast-success { @apply bg-green-900 text-green-200 border border-green-700; }
.toast-error { @apply bg-red-900 text-red-200 border border-red-700; }
.toast-info { @apply bg-blue-900 text-blue-200 border border-blue-700; }

@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* Wizard step indicator */
.step-dot { @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border-2 transition-all; }
.step-dot.active { @apply border-redline bg-redline text-white; }
.step-dot.done { @apply border-green-500 bg-green-500/20 text-green-400; }
.step-dot.pending { @apply border-ink-600 text-ink-500; }

/* Loading spinner */
.spinner {
    @apply w-5 h-5 border-2 border-ink-600 border-t-redline rounded-full;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Code/diff blocks */
.diff-line { @apply font-mono text-sm leading-relaxed px-4 py-1; }
.diff-line:hover { @apply bg-ink-800/50; }

/* Responsive table */
.data-table { @apply w-full text-sm; }
.data-table thead { @apply text-xs uppercase text-ink-500 border-b border-ink-800; }
.data-table th { @apply px-4 py-3 text-left font-medium; }
.data-table td { @apply px-4 py-3 border-b border-ink-800/50; }
.data-table tbody tr:hover { @apply bg-ink-800/30; }