/**
 * IOFALL Thunderbird-Style Email Client CSS
 * Clean, premium dark design incorporating HSL palettes, transitions, and Quill dark-theme overrides.
 */

/* 3-Panel Layout Grid */
.email-client-container {
    display: flex;
    height: calc(100vh - 2rem); /* Fits perfectly inside the workspace main viewport */
    width: 100%;
    background-color: #030712; /* gray-950 */
    overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid #1f2937; /* gray-800 */
}

.email-sidebar-pane {
    width: 230px;
    min-width: 180px;
    max-width: 320px;
    background-color: #0f172a; /* Slate 900 */
    border-left: 1px solid #1e293b; /* Slate 800 */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Panel 2 — Message List Pane */
.email-list-pane {
    width: 360px;
    min-width: 280px;
    max-width: 500px;
    background-color: #0b0f19;
    border-right: 1px solid #1f2937;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Panel 3 — Reader Pane */
.email-reader-pane {
    flex: 1;
    background-color: #030712;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Resizer Drag Handles */
.pane-resizer {
    width: 4px;
    cursor: col-resize;
    background-color: transparent;
    transition: background-color 0.2s ease;
    z-index: 10;
}

.pane-resizer:hover, .pane-resizer.is-dragging {
    background-color: #38bdf8; /* sky-400 */
}

/* Color Dot Identity System */
.account-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
}

/* Folder Tree styling */
.folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: #9ca3af; /* gray-400 */
    transition: all 0.2s ease;
}

.folder-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.folder-item.active {
    background-color: rgba(253, 224, 33, 0.15); /* Brand color fallback with opacity */
    color: #FDE021;
    border-left: 3px solid #FDE021;
}

/* Email Item Rows */
.email-row {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.email-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.email-row.selected {
    background-color: rgba(14, 165, 233, 0.1); /* Sky with opacity */
    border-left-color: #0ea5e9 !important;
}

.email-row.unread {
    background-color: rgba(255, 255, 255, 0.015);
}

.email-row.unread .sender-name,
.email-row.unread .email-subject {
    font-weight: 700;
    color: #ffffff;
}

.email-row.unread::after {
    content: '';
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    width: 6px;
    height: 6px;
    background-color: #0ea5e9;
    border-radius: 9999px;
}

/* Glowing Invoice Badge card */
.invoice-detected-card {
    background: linear-gradient(135deg, rgba(253, 224, 33, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
    border: 1px solid rgba(253, 224, 33, 0.2);
    box-shadow: 0 4px 20px rgba(253, 224, 33, 0.05);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.invoice-detected-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #FDE021;
}

/* Scrollbar Customization */
.email-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.email-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.email-scroll::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 999px;
}

.email-scroll::-webkit-scrollbar-thumb:hover {
    background: #374151;
}

/* Quill Editor Dark Theme Overrides */
.ql-toolbar.ql-snow {
    background-color: #0f172a !important; /* Slate 900 */
    border-color: #1e293b !important; /* Slate 800 */
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    padding: 8px !important;
}

.ql-toolbar.ql-snow .ql-stroke {
    stroke: #94a3b8 !important; /* Slate 400 */
}

.ql-toolbar.ql-snow .ql-fill {
    fill: #94a3b8 !important;
}

.ql-toolbar.ql-snow .ql-picker {
    color: #94a3b8 !important;
}

.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: #38bdf8 !important; /* Sky 400 */
}

.ql-container.ql-snow {
    border-color: #1e293b !important;
    background-color: #030712;
    color: #f1f5f9;
    font-family: inherit;
    font-size: 0.875rem;
}

.ql-editor {
    min-height: 180px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 15px !important;
}

.ql-editor.ql-blank::before {
    color: #64748b !important; /* Slate 500 placeholder */
    font-style: normal !important;
}

/* Floating Composer Transition */
#email-composer-container {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.15s ease;
}

/* Sanitized Email Frame */
.email-body-html {
    line-height: 1.6;
}

/* HTML Email: Render on a clean light sheet for high contrast readability of layout templates */
.email-body-html.is-html {
    background-color: #ffffff;
    color: #1f2937; /* Dark gray text */
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Ensure links in HTML emails are visible on a white background */
.email-body-html.is-html a {
    color: #0284c7; /* Darker blue with high contrast on white */
    text-decoration: underline;
}

/* Plaintext Email: Render transparently in dark mode matching the application theme */
.email-body-html.is-plaintext {
    color: #e2e8f0; /* Light gray text for dark background */
}

/* Ensure links in Plaintext emails are visible on a dark background */
.email-body-html.is-plaintext a {
    color: #38bdf8; /* Lighter sky blue for dark background */
    text-decoration: underline;
}

.email-body-html img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}


/* Connection States Indicator Colors */
.indicator-synced { background-color: #10b981; box-shadow: 0 0 8px #10b981; }
.indicator-syncing { background-color: #38bdf8; animation: pulse 1.5s infinite; }
.indicator-error { background-color: #ef4444; box-shadow: 0 0 8px #ef4444; }
.indicator-offline { background-color: #6b7280; }

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Compact folder items for hierarchical grouping */
.folder-item.compact-folder {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 0.5rem;
}
.folder-item.compact-folder:hover {
    background-color: rgba(255, 255, 255, 0.04);
}
.folder-item.compact-folder.active {
    background-color: rgba(253, 224, 33, 0.12);
    border-left: 2px solid #FDE021;
}
.folder-item.compact-folder button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.subfolders {
    margin-left: 0.6rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0.2rem;
}

/* Responsive Mobile View overrides */
@media (max-width: 767px) {
    .pane-resizer {
        display: none !important;
    }
    
    .email-client-container {
        display: block !important;
        height: calc(100vh - 6.5rem) !important;
        border: none !important;
        border-radius: 0.75rem !important;
        background-color: #030712;
    }

    .email-sidebar-pane,
    .email-list-pane,
    .email-reader-pane {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        display: none !important;
        height: 100% !important;
    }

    .email-client-container.mobile-view-folders .email-sidebar-pane {
        display: flex !important;
    }

    .email-client-container.mobile-view-list .email-list-pane {
        display: flex !important;
    }

    .email-client-container.mobile-view-reader .email-reader-pane {
        display: flex !important;
    }
}