/*
 * Bookitly Email — Design Tokens & Utility Styles
 *
 * Intent: Clean, professional hotel communication tool
 * Feel: Trustworthy, modern, cool — like a well-organized business
 * Color world: Cool blue-gray (slate), brand blue (#528BB8)
 * Depth: Borders-only — clean, professional
 * Typography: Inter — readable, modern
 * Spacing: 4px base (4/8/12/16/24/32/48/64)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ─── Base ─── */
*, *::before, *::after { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
[x-cloak] { display: none !important; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* ─── Status Badges (E-Mail) ─── */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1.5; }
.badge-open { background: #dbeafe; color: #1d4ed8; }
.badge-in_progress { background: #fef3c7; color: #b45309; }
.badge-waiting { background: #ffedd5; color: #c2410c; }
.badge-done { background: #dcfce7; color: #15803d; }
.badge-archived { background: #f1f5f9; color: #475569; }
.dark .badge-open { background: rgba(59,130,246,0.1); color: #93c5fd; }
.dark .badge-in_progress { background: rgba(245,158,11,0.1); color: #fcd34d; }
.dark .badge-waiting { background: rgba(249,115,22,0.1); color: #fdba74; }
.dark .badge-done { background: rgba(34,197,94,0.1); color: #86efac; }
.dark .badge-archived { background: rgba(241,245,249,0.06); color: #94a3b8; }

/* ─── Priority Badges ─── */
.badge-low { background: #f1f5f9; color: #475569; }
.badge-normal { background: #dbeafe; color: #1d4ed8; }
.badge-high { background: #fee2e2; color: #dc2626; }
.dark .badge-low { background: rgba(241,245,249,0.06); color: #94a3b8; }
.dark .badge-normal { background: rgba(59,130,246,0.1); color: #93c5fd; }
.dark .badge-high { background: rgba(239,68,68,0.1); color: #fca5a5; }

/* ─── Text Readability (Light Mode) ─── */
html:not(.dark) .text-slate-400 {
    color: rgb(100 116 139) !important; /* slate-500 */
}
html:not(.dark) .text-slate-500 {
    color: rgb(71 85 105) !important; /* slate-600 */
}
html:not(.dark) .placeholder-slate-400::placeholder {
    color: rgb(148 163 184) !important;
}
html:not(.dark) .placeholder-slate-500::placeholder {
    color: rgb(100 116 139) !important;
}
html:not(.dark) th .text-slate-400,
html:not(.dark) th.text-slate-400 {
    color: rgb(100 116 139) !important;
}

/* ─── Animations ─── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.2s ease-out; }

@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.animate-slide-in-right { animation: slideInRight 0.3s ease-out; }

@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

/* ─── Form: Select-Höhe = Input-Höhe ─── */
select { height: 38px; }

/* ─── Focus ─── */
:focus-visible { outline: 2px solid #528BB8; outline-offset: 2px; }
.dark :focus-visible { outline-color: #6A9CC5; }

/* ─── Selection ─── */
::selection { background: rgba(82, 139, 184, 0.15); }

/* ─── Chat Panel ─── */
.chat-panel-enter { transform: translateX(100%); }
.chat-panel-active { transform: translateX(0); transition: transform 0.3s ease-out; }

/* ─── Email Content Sanitized ─── */
.email-content img { max-width: 100%; height: auto; }
.email-content a { color: #528BB8; text-decoration: underline; }
.dark .email-content a { color: #6A9CC5; }
.email-content table { max-width: 100%; overflow-x: auto; }
.email-content blockquote { border-left: 3px solid #D8DFE7; padding-left: 12px; margin: 8px 0; color: #8494A7; }
.dark .email-content blockquote { border-color: #2D3D52; color: #A2B0C0; }

/* ─── Unread indicator ─── */
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: #528BB8; }

/* ─── Print ─── */
@media print {
    .no-print { display: none !important; }
    body { background: white !important; color: black !important; }
}