/**
 * Email Gateway — Shared Base Styles
 * Loaded by all dashboard pages for consistent styling.
 * Uses Tailwind @apply for design-token consistency.
 */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Dark mode overrides for design tokens */
.dark {
    --tw-bg-opacity: 1;
    color-scheme: dark;
}
.dark body,
.dark .bg-background { background-color: hsl(222.2 84% 4.9%) !important; }
.dark .text-foreground { color: hsl(210 40% 98%) !important; }
.dark .bg-card,
.dark .bg-card\/80 { background-color: hsl(222.2 47% 11.2%) !important; }
.dark .text-card-foreground { color: hsl(210 40% 98%) !important; }
.dark .bg-muted { background-color: hsl(217.2 32.6% 17.5%) !important; }
.dark .bg-muted\/50 { background-color: hsla(217.2, 32.6%, 17.5%, 0.5) !important; }
.dark .text-muted-foreground { color: hsl(215 20.2% 65.1%) !important; }
.dark .bg-accent { background-color: hsl(217.2 32.6% 17.5%) !important; }
.dark .bg-accent\/50 { background-color: hsla(217.2, 32.6%, 17.5%, 0.5) !important; }
.dark .border-border,
.dark .border-border\/50,
.dark .border-border\/30 { border-color: hsl(217.2 32.6% 17.5%) !important; }
.dark .bg-primary { background-color: hsl(210 40% 98%) !important; }
.dark .text-primary { color: hsl(210 40% 98%) !important; }
.dark .text-primary-foreground { color: hsl(222.2 47.4% 11.2%) !important; }
.dark .bg-destructive { background-color: hsl(0 62.8% 30.6%) !important; }

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: hsl(210 40% 96.1%);
}
::-webkit-scrollbar-thumb {
    background: hsl(215.4 16.3% 76.9%);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(215.4 16.3% 56.9%);
}
.dark ::-webkit-scrollbar-track {
    background: hsl(222 47% 11%);
}
.dark ::-webkit-scrollbar-thumb {
    background: hsl(215 16% 36%);
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: hsl(215 16% 46%);
}

/* Form controls */
.form-input {
    @apply block w-full rounded-lg border border-border bg-background px-3 py-2 text-sm
           ring-offset-background placeholder:text-muted-foreground
           focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/20
           disabled:cursor-not-allowed disabled:opacity-50;
}

.form-label {
    @apply text-sm font-medium text-foreground;
}

.form-select {
    @apply h-9 rounded-lg border border-border bg-background px-3 text-sm
           outline-none focus:ring-2 focus:ring-ring/20;
}

/* Stat cards */
.stat-card {
    @apply rounded-xl border border-border/50 bg-card p-4;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* Content cards */
.content-card {
    @apply rounded-xl border border-border/50 bg-card;
}

/* Tables */
.data-table {
    @apply w-full text-sm;
}
.data-table thead tr {
    @apply border-b border-border/50;
}
.data-table th {
    @apply px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider;
}
.data-table td {
    @apply px-4 py-3;
}
.data-table tbody tr {
    @apply border-b border-border/30 hover:bg-accent/50 transition-colors;
}

/* Status badges */
.badge {
    @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
}
.badge-clean { @apply bg-emerald-500/10 text-emerald-700 dark:text-emerald-400; }
.badge-spam { @apply bg-amber-500/10 text-amber-700 dark:text-amber-400; }
.badge-phishing { @apply bg-orange-500/10 text-orange-700 dark:text-orange-400; }
.badge-malware { @apply bg-red-500/10 text-red-700 dark:text-red-400; }
.badge-suspicious { @apply bg-yellow-500/10 text-yellow-700 dark:text-yellow-400; }
.badge-quarantine { @apply bg-purple-500/10 text-purple-700 dark:text-purple-400; }

/* Action buttons */
.btn-primary {
    @apply inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium
           text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50;
}
.btn-secondary {
    @apply inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5
           text-sm font-medium hover:bg-accent transition-colors;
}
.btn-destructive {
    @apply inline-flex items-center gap-1.5 rounded-lg bg-destructive px-4 py-2 text-sm font-medium
           text-destructive-foreground hover:bg-destructive/90 transition-colors disabled:opacity-50;
}
.btn-ghost {
    @apply inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5
           text-sm font-medium hover:bg-accent transition-colors;
}

/* Modal/dialog overlay */
.modal-overlay {
    @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center;
    backdrop-filter: blur(4px);
}
.modal-panel {
    @apply bg-card rounded-xl border border-border/50 shadow-xl w-full mx-4;
    max-height: 90vh;
}
.modal-header {
    @apply flex items-center justify-between p-5 border-b border-border/50;
}
.modal-body {
    @apply p-5 overflow-y-auto;
}
.modal-footer {
    @apply flex items-center justify-end gap-3 p-5 border-t border-border/50;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.3s ease-out; }

/* Empty state */
.empty-state {
    @apply flex flex-col items-center justify-center py-16 text-center;
}
.empty-state svg {
    @apply h-12 w-12 text-muted-foreground/40 mb-4;
}
.empty-state h3 {
    @apply text-lg font-semibold text-foreground mb-1;
}
.empty-state p {
    @apply text-sm text-muted-foreground max-w-md;
}

/* Loading skeleton */
.skeleton {
    @apply animate-pulse rounded-lg bg-muted;
}

/* Pagination */
.pagination {
    @apply flex items-center gap-1;
}
.pagination button {
    @apply h-8 min-w-[2rem] rounded-lg text-sm font-medium transition-colors;
}
.pagination button:hover {
    @apply bg-accent;
}
.pagination button.active {
    @apply bg-primary text-primary-foreground;
}
.pagination button:disabled {
    @apply opacity-50 cursor-not-allowed;
}