/* Email Inbox — page-specific additions on top of the shared vx design system.
   Loaded globally via app.js alongside vx-design-system.css (see rationale there). */

.email-shell { display: grid; grid-template-columns: 220px 360px 1fr; height: calc(100vh - 260px); min-height: 480px; max-height: 780px; align-items: stretch; }
@media (max-width: 1100px) {
    .email-shell { grid-template-columns: 200px 1fr; }
    .email-shell .email-read-pane { display: none; }
}

/* <turbo-frame> is an unstyled custom element (defaults to display:inline),
   so without this it won't stretch to fill its grid cell and flex:1 children
   (like .email-read-empty's centering) collapse to content height. */
.email-shell > turbo-frame { display: flex; flex-direction: column; min-height: 0; }
.email-shell .email-list-pane,
.email-shell .email-read-pane { flex: 1; min-height: 0; }

.email-folders { border-right: 1px solid #EEF1F6; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.email-folder-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: #3D486A; text-decoration: none; cursor: pointer; }
.email-folder-row:hover { background: #F4F6FB; color: #1C2540; text-decoration: none; }
.email-folder-row.active { background: #EEF3FF; color: #3B6EF6; }
.email-folder-count { margin-left: auto; font-size: 11px; font-weight: 800; color: #7A869E; background: #F1F4F9; padding: 2px 7px; border-radius: 20px; }
.email-folder-row.active .email-folder-count { color: #3B6EF6; background: #DCE6FF; }

.email-list-pane { display: flex; flex-direction: column; border-right: 1px solid #EEF1F6; min-width: 0; }
.email-list-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #EEF1F6; }
.email-list-body { flex: 1; overflow-y: auto; min-height: 0; }
.email-msg-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #F1F4F9; cursor: pointer; text-decoration: none; color: inherit; }
.email-msg-row:hover { background: #F7F9FC; }
.email-msg-row.active { background: #EEF3FF; }
.email-msg-row.unread .email-msg-from { font-weight: 800; color: #1C2540; }
.email-msg-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; }
.email-msg-body { min-width: 0; flex: 1; }
.email-msg-top { display: flex; align-items: center; gap: 8px; }
.email-msg-from { font-size: 13.5px; font-weight: 700; color: #3D486A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-msg-time { margin-left: auto; font-size: 12px; color: #94A0B8; flex-shrink: 0; }
.email-msg-subject { font-size: 13.5px; color: #3D486A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.email-msg-preview { font-size: 12.5px; color: #94A0B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.email-msg-star { flex-shrink: 0; background: none; border: none; padding: 4px; cursor: pointer; color: #C7D0E0; display: flex; }
.email-msg-star.starred { color: #F5A623; }
.email-msg-star:hover { color: #F5A623; }

.email-read-pane { display: flex; flex-direction: column; min-width: 0; }
.email-read-toolbar { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid #EEF1F6; }
.email-read-icon-btn { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #59647E; cursor: pointer; border: none; background: none; }
.email-read-icon-btn:hover { background: #F4F6FB; color: #1C2540; }
.email-read-icon-btn.danger:hover { background: #FDE9EC; color: #E5484D; }
.email-read-body { flex: 1; overflow-y: auto; padding: 26px 32px; min-height: 0; }
.email-read-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #A9B4C8; font-size: 14px; flex-direction: column; gap: 10px; }

.email-compose-chip { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid #D8E0F0; color: #59647E; background: #fff; }
.email-compose-chip.active { background: #3B6EF6; border-color: #3B6EF6; color: #fff; }
.email-compose-result { display: flex; align-items: center; gap: 11px; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid #F3F5FA; }
.email-compose-result:hover { background: #F7F9FC; }