{% extends 'base.html' %}

{% block title %}Inbox - FinBot Admin Portal{% endblock %}

{% block meta_description %}Admin inbox. View notifications, vendor communications, compliance updates, and important messages.{% endblock %}

{% block nav_messages %}active{% endblock %}

{% block page_title %}Inbox{% endblock %}
{% block page_subtitle %}Admin messages and notifications{% endblock %}

{% block header_actions %}
<button id="compose-btn" onclick="openCompose()" class="px-4 py-2 text-sm font-medium rounded-lg bg-admin-primary text-portal-bg-primary hover:bg-admin-secondary transition-colors inline-flex items-center gap-2">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
    </svg>
    Compose
</button>
<button id="mark-all-read-btn" class="px-4 py-2 text-sm font-medium rounded-lg border border-admin-primary/30 text-admin-primary hover:bg-admin-primary/10 transition-colors inline-flex items-center gap-2">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    Mark All Read
</button>
<button id="refresh-inbox-btn" class="px-4 py-2 text-sm font-medium rounded-lg border border-admin-primary/30 text-admin-primary hover:bg-admin-primary/10 transition-colors inline-flex items-center gap-2">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
    </svg>
    Refresh
</button>
{% endblock %}

{% block content %}
<!-- Inbox Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-portal-bg-tertiary border border-admin-primary/10 rounded-xl p-5 text-center">
        <div class="flex justify-center mb-2">
            <svg class="w-6 h-6 text-admin-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
        </div>
        <div id="stat-total" class="text-2xl font-bold text-text-bright">0</div>
        <div class="text-xs text-text-secondary mt-1">Total</div>
    </div>

    <div class="bg-portal-bg-tertiary border border-admin-primary/10 rounded-xl p-5 text-center">
        <div class="flex justify-center mb-2">
            <svg class="w-6 h-6 text-admin-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
            </svg>
        </div>
        <div id="stat-unread" class="text-2xl font-bold text-text-bright">0</div>
        <div class="text-xs text-text-secondary mt-1">Unread</div>
    </div>

    <div class="bg-portal-bg-tertiary border border-admin-primary/10 rounded-xl p-5 text-center">
        <div class="flex justify-center mb-2">
            <svg class="w-6 h-6 text-admin-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
            </svg>
        </div>
        <div id="stat-payment" class="text-2xl font-bold text-text-bright">0</div>
        <div class="text-xs text-text-secondary mt-1">Payment</div>
    </div>

    <div class="bg-portal-bg-tertiary border border-admin-primary/10 rounded-xl p-5 text-center">
        <div class="flex justify-center mb-2">
            <svg class="w-6 h-6 text-admin-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
        </div>
        <div id="stat-alerts" class="text-2xl font-bold text-text-bright">0</div>
        <div class="text-xs text-text-secondary mt-1">Alerts</div>
    </div>
</div>

<!-- Inbox -->
<div class="inbox-container">
    <!-- Toolbar -->
    <div class="inbox-toolbar">
        <div class="flex items-center space-x-2">
            <button class="inbox-filter-btn active" data-filter="all">All</button>
            <button class="inbox-filter-btn" data-filter="unread">Unread</button>
            <button class="inbox-filter-btn" data-filter="status_update">Status</button>
            <button class="inbox-filter-btn" data-filter="payment_update">Payment</button>
            <button class="inbox-filter-btn" data-filter="payment_confirmation">Confirmed</button>
            <button class="inbox-filter-btn" data-filter="compliance_alert">Compliance</button>
            <button class="inbox-filter-btn" data-filter="action_required">Action</button>
        </div>
        <div class="text-sm text-text-secondary">
            <span id="inbox-showing">0 messages</span>
        </div>
    </div>

    <!-- Two-pane layout -->
    <div class="inbox-panes">
        <!-- Message List (left pane) -->
        <div class="inbox-list" id="inbox-list">
            <!-- Loading state -->
            <div id="inbox-loading" class="inbox-empty-state">
                <svg class="animate-spin h-8 w-8 text-admin-primary mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span class="text-text-secondary">Loading messages...</span>
            </div>

            <!-- Empty state -->
            <div id="inbox-empty" class="inbox-empty-state hidden">
                <svg class="w-16 h-16 text-text-secondary/30 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                <p class="text-text-secondary font-medium">No messages</p>
                <p class="text-text-secondary/60 text-sm mt-1">Admin messages and notifications will appear here</p>
            </div>
        </div>

        <!-- Reading Pane (right pane) -->
        <div class="inbox-reading-pane" id="reading-pane">
            <!-- No selection state -->
            <div id="reading-pane-empty" class="reading-pane-placeholder">
                <div class="text-center">
                    <div class="w-20 h-20 rounded-full bg-portal-bg-tertiary flex items-center justify-center mx-auto mb-6">
                        <svg class="w-10 h-10 text-text-secondary/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <p class="text-text-secondary font-medium text-lg">Select a message</p>
                    <p class="text-text-secondary/60 text-sm mt-2">Choose a message from the list to read it here</p>
                </div>
            </div>

            <!-- Message detail (hidden until selected) -->
            <div id="reading-pane-content" class="reading-pane-detail hidden">
                <!-- Header -->
                <div class="reading-pane-header">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1 min-w-0">
                            <h2 id="detail-subject" class="text-xl font-bold text-text-bright truncate"></h2>
                            <div class="flex items-center space-x-3 mt-2">
                                <span id="detail-type-badge" class="notification-badge info"></span>
                                <span id="detail-channel" class="text-xs text-text-secondary"></span>
                            </div>
                        </div>
                        <button id="detail-back-btn" class="md:hidden p-2 text-text-secondary hover:text-text-bright rounded-lg hover:bg-white/5 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                            </svg>
                        </button>
                    </div>
                </div>

                <!-- Sender + date bar -->
                <div class="reading-pane-meta">
                    <div class="flex items-center space-x-3">
                        <div id="detail-avatar" class="w-10 h-10 rounded-full bg-gradient-to-r from-admin-primary to-admin-secondary flex items-center justify-center text-sm font-bold text-portal-bg-primary flex-shrink-0">
                            FB
                        </div>
                        <div class="min-w-0">
                            <div id="detail-sender" class="text-sm font-semibold text-text-bright truncate"></div>
                            <div id="detail-date" class="text-xs text-text-secondary"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span id="detail-invoice-link" class="hidden">
                            <a href="#" class="inline-flex items-center space-x-1 text-xs text-admin-primary hover:text-admin-accent transition-colors">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                </svg>
                                <span>View Invoice</span>
                            </a>
                        </span>
                    </div>
                </div>

                <!-- Address fields (To / CC / BCC) -->
                <div id="detail-addresses" class="hidden px-7 py-3 border-b border-white/5 text-xs space-y-1">
                    <div id="detail-to-row" class="hidden"><span class="text-text-secondary font-medium w-8 inline-block">To:</span> <span id="detail-to" class="text-text-primary"></span></div>
                    <div id="detail-cc-row" class="hidden"><span class="text-text-secondary font-medium w-8 inline-block">Cc:</span> <span id="detail-cc" class="text-text-primary"></span></div>
                    <div id="detail-bcc-row" class="hidden"><span class="text-text-secondary font-medium w-8 inline-block">Bcc:</span> <span id="detail-bcc" class="text-text-primary"></span></div>
                </div>

                <!-- Body -->
                <div class="reading-pane-body">
                    <div id="detail-body" class="prose-message"></div>

                    <!-- Reply actions -->
                    <div class="flex items-center gap-2 mt-6 pt-4" style="border-top: 1px solid rgba(255,255,255,0.06);">
                        <button onclick="replyToMessage()" class="px-4 py-2 text-xs font-medium rounded-lg border border-white/10 text-text-secondary hover:text-text-bright hover:bg-white/5 transition-colors inline-flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
                            Reply
                        </button>
                        <button onclick="replyAllToMessage()" class="px-4 py-2 text-xs font-medium rounded-lg border border-white/10 text-text-secondary hover:text-text-bright hover:bg-white/5 transition-colors inline-flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
                            Reply All
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Compose Modal -->
<div id="compose-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center" style="background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);">
    <div class="w-full max-w-2xl mx-4 rounded-2xl overflow-hidden" style="background: #151520; border: 1px solid rgba(245,158,11,0.2);">
        <div class="flex items-center justify-between px-6 py-4" style="border-bottom: 1px solid rgba(245,158,11,0.1);">
            <h3 class="text-lg font-semibold text-text-bright">New Email</h3>
            <button onclick="closeCompose()" class="p-1.5 rounded-lg text-text-secondary hover:text-text-bright hover:bg-white/5 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="px-6 py-4 space-y-3">
            <div>
                <label class="block text-xs font-medium text-text-secondary mb-1">To</label>
                <input id="compose-to" type="text" placeholder="recipient@example.com" class="w-full bg-portal-bg-primary border border-white/10 rounded-lg px-3 py-2 text-sm text-text-bright placeholder-text-secondary/50 focus:outline-none focus:border-admin-primary/50">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs font-medium text-text-secondary mb-1">CC <span class="text-text-secondary/50">(optional)</span></label>
                    <input id="compose-cc" type="text" placeholder="cc@example.com" class="w-full bg-portal-bg-primary border border-white/10 rounded-lg px-3 py-2 text-sm text-text-bright placeholder-text-secondary/50 focus:outline-none focus:border-admin-primary/50">
                </div>
                <div>
                    <label class="block text-xs font-medium text-text-secondary mb-1">BCC <span class="text-text-secondary/50">(optional)</span></label>
                    <input id="compose-bcc" type="text" placeholder="bcc@example.com" class="w-full bg-portal-bg-primary border border-white/10 rounded-lg px-3 py-2 text-sm text-text-bright placeholder-text-secondary/50 focus:outline-none focus:border-admin-primary/50">
                </div>
            </div>
            <div>
                <label class="block text-xs font-medium text-text-secondary mb-1">Subject</label>
                <input id="compose-subject" type="text" placeholder="Email subject" class="w-full bg-portal-bg-primary border border-white/10 rounded-lg px-3 py-2 text-sm text-text-bright placeholder-text-secondary/50 focus:outline-none focus:border-admin-primary/50">
            </div>
            <div>
                <label class="block text-xs font-medium text-text-secondary mb-1">Message</label>
                <textarea id="compose-body" rows="8" placeholder="Write your message..." class="w-full bg-portal-bg-primary border border-white/10 rounded-lg px-3 py-2 text-sm text-text-bright placeholder-text-secondary/50 focus:outline-none focus:border-admin-primary/50 resize-none"></textarea>
            </div>
        </div>
        <div class="flex items-center justify-end gap-3 px-6 py-4" style="border-top: 1px solid rgba(245,158,11,0.1);">
            <button onclick="closeCompose()" class="px-4 py-2 text-sm rounded-lg border border-white/10 text-text-secondary hover:text-text-bright hover:bg-white/5 transition-colors">Cancel</button>
            <button id="compose-send-btn" onclick="sendComposedEmail()" class="px-6 py-2 text-sm font-medium rounded-lg bg-admin-primary text-portal-bg-primary hover:bg-admin-secondary transition-colors inline-flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                Send
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* ===== Inbox Container ===== */
.inbox-container {
    background: var(--portal-bg-secondary, #151520);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 340px);
    min-height: 450px;
}

/* ===== Toolbar ===== */
.inbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.1);
    background: rgba(21, 21, 32, 0.8);
    flex-shrink: 0;
    gap: 12px;
    overflow-x: auto;
}

.inbox-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.inbox-filter-btn:hover {
    color: #e2e8f0;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.05);
}

.inbox-filter-btn.active {
    color: #0a0a0f;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
    font-weight: 600;
}

/* ===== Two-pane layout ===== */
.inbox-panes {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ===== Message list (left) ===== */
.inbox-list {
    width: 400px;
    min-width: 340px;
    border-right: 1px solid rgba(245, 158, 11, 0.1);
    overflow-y: auto;
    flex-shrink: 0;
}

.inbox-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

/* ===== Message row ===== */
.msg-row {
    display: flex;
    align-items: flex-start;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.msg-row:hover {
    background: rgba(245, 158, 11, 0.04);
}

.msg-row.selected {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    padding-left: 17px;
}

.msg-row.unread {
    background: rgba(245, 158, 11, 0.02);
}

.msg-row.unread .msg-subject {
    color: #e2e8f0;
    font-weight: 600;
}

.msg-row.unread::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
}

.msg-row.unread {
    padding-left: 24px;
}

.msg-row.selected.unread {
    padding-left: 21px;
}

.msg-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    margin-top: 2px;
}

.msg-icon.status_update { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.msg-icon.payment_update,
.msg-icon.payment_confirmation { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.msg-icon.compliance_alert { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.msg-icon.action_required { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.msg-icon.general { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.msg-icon.reminder { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }

.msg-content {
    flex: 1;
    min-width: 0;
}

.msg-subject {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.msg-preview {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

.msg-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 12px;
    flex-shrink: 0;
    gap: 4px;
}

.msg-time {
    font-size: 0.7rem;
    color: #94a3b8;
    white-space: nowrap;
}

.msg-type-dot {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    white-space: nowrap;
    text-transform: capitalize;
}

.msg-type-dot.status_update { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.msg-type-dot.payment_update,
.msg-type-dot.payment_confirmation { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.msg-type-dot.compliance_alert { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.msg-type-dot.action_required { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.msg-type-dot.general { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.msg-type-dot.reminder { background: rgba(251, 191, 36, 0.1); color: #fbbf24; }

/* ===== Reading pane (right) ===== */
.inbox-reading-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reading-pane-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.reading-pane-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.reading-pane-header {
    padding: 20px 28px 12px;
    flex-shrink: 0;
}

.reading-pane-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.reading-pane-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 40px;
}

.prose-message {
    color: #e2e8f0;
    font-size: 0.9375rem;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===== Notification badges ===== */
.notification-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: capitalize;
}

.notification-badge.status_update { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); }
.notification-badge.payment_update,
.notification-badge.payment_confirmation { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.25); }
.notification-badge.compliance_alert { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }
.notification-badge.action_required { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.25); }
.notification-badge.general { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.25); }
.notification-badge.reminder { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .inbox-list {
        width: 100%;
        min-width: 0;
        border-right: none;
    }
    .inbox-reading-pane {
        display: none;
    }
    .inbox-panes.detail-open .inbox-list {
        display: none;
    }
    .inbox-panes.detail-open .inbox-reading-pane {
        display: flex;
    }
}

/* ===== Scrollbar ===== */
.inbox-list::-webkit-scrollbar,
.reading-pane-body::-webkit-scrollbar {
    width: 6px;
}

.inbox-list::-webkit-scrollbar-track,
.reading-pane-body::-webkit-scrollbar-track {
    background: transparent;
}

.inbox-list::-webkit-scrollbar-thumb,
.reading-pane-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.inbox-list::-webkit-scrollbar-thumb:hover,
.reading-pane-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}
</style>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', path='js/admin/messages.js') }}"></script>
{% endblock %}