/* EmailToneAI – Custom styles on top of Tailwind CSS */

/* ── Utility classes referenced in PHP templates ─────────────────────────── */

.th {
    @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.td {
    @apply px-4 py-3 text-sm text-gray-700 dark:text-gray-300;
}

.input-field {
    @apply w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
           bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100
           placeholder-gray-400 dark:placeholder-gray-500
           focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
           transition-colors;
}

/* ── Button variants ─────────────────────────────────────────────────────── */

.btn {
    @apply inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
           transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-sm {
    @apply inline-flex items-center justify-center gap-1 px-3 py-1.5 rounded-md text-xs font-medium
           transition-colors focus:outline-none;
}

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

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

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

.btn-outline {
    @apply border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300
           hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-400;
}

/* ── Badge variants ──────────────────────────────────────────────────────── */

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

.badge-success  { @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400; }
.badge-warning  { @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400; }
.badge-danger   { @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400; }
.badge-info     { @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400; }
.badge-primary  { @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400; }
.badge-secondary{ @apply bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400; }

/* ── Email body display ──────────────────────────────────────────────────── */

.email-body {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Toast notifications ─────────────────────────────────────────────────── */

.toast {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl shadow-lg text-sm font-medium
           border max-w-sm w-full pointer-events-auto;
    animation: slideInRight 0.3s ease-out;
}

.toast-success {
    @apply bg-green-50 text-green-800 border-green-200 dark:bg-green-900/80 dark:text-green-200 dark:border-green-700;
}

.toast-error {
    @apply bg-red-50 text-red-800 border-red-200 dark:bg-red-900/80 dark:text-red-200 dark:border-red-700;
}

.toast-info {
    @apply bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/80 dark:text-blue-200 dark:border-blue-700;
}

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

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

.toast-exit {
    animation: fadeOut 0.3s ease-in forwards;
}

/* ── JSON viewer ─────────────────────────────────────────────────────────── */

.json-viewer {
    @apply font-mono text-xs leading-relaxed;
}

.json-viewer .json-key    { @apply text-blue-600 dark:text-blue-400; }
.json-viewer .json-string { @apply text-green-600 dark:text-green-400; }
.json-viewer .json-number { @apply text-orange-500 dark:text-orange-400; }
.json-viewer .json-bool   { @apply text-purple-600 dark:text-purple-400; }
.json-viewer .json-null   { @apply text-gray-400; }

/* ── Responsive adjustments ──────────────────────────────────────────────── */

/* Body scroll lock when mobile sidebar is open */
body.sidebar-open {
    overflow: hidden;
}