/* FillKite Inbox mockup. */
.fkc-inbox { overflow: hidden; border: 1px solid var(--fkc-border); border-radius: var(--fkc-radius-lg); background: var(--fkc-bg); box-shadow: var(--fkc-shadow-lg); color: var(--fkc-text); font-size: 13px; line-height: 1.4; text-align: left; }
.fkc-inbox p { margin: 0; }
.fkc-inbox__search { display: flex; flex: 1; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--fkc-border); border-radius: var(--fkc-radius-sm); background: var(--fkc-bg); color: var(--fkc-muted); font-size: 12px; }
.fkc-inbox__search svg { width: 14px; height: 14px; }
.fkc-inbox__filter { display: flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--fkc-border); border-radius: var(--fkc-radius-sm); background: var(--fkc-bg); font-size: 12px; font-weight: 500; white-space: nowrap; }

.fkc-inbox__body { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.fkc-inbox__folders { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--fkc-border); background: var(--fkc-bg-soft); }
.fkc-inbox__folder { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: var(--fkc-radius-sm); color: var(--fkc-muted); font-weight: 500; }
.fkc-inbox__folder.is-active { background: var(--fkc-bg); color: var(--fkc-text); font-weight: 700; box-shadow: var(--fkc-shadow-sm); }
.fkc-inbox__count { padding: 0 7px; border-radius: 999px; background: var(--fkc-border); color: var(--fkc-text); font-size: 11px; font-weight: 700; }
.fkc-inbox__folder.is-active .fkc-inbox__count { background: var(--fkc-primary-strong); color: #fff; }

.fkc-inbox__entry { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--fkc-border); }
.fkc-inbox__entry:last-child { border-bottom: 0; }
.fkc-inbox__entry.is-selected { background: #F5F9FF; box-shadow: inset 3px 0 0 var(--fkc-primary); }
.fkc-inbox__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fkc-primary-soft); color: var(--fkc-primary-ink); font-size: 12px; font-weight: 700; }
.fkc-inbox__avatar--coral { background: var(--fkc-accent-soft); color: var(--fkc-accent-ink); }
.fkc-inbox__avatar--green { background: var(--fkc-success-soft); color: var(--fkc-success-ink); }
.fkc-inbox__avatar--grey { background: var(--fkc-fill); color: var(--fkc-text); }
.fkc-inbox__main { min-width: 0; }
.fkc-inbox__name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.fkc-inbox__entry.is-unread .fkc-inbox__name { font-weight: 800; }
.fkc-inbox__entry.is-unread .fkc-inbox__name::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fkc-primary); }
.fkc-inbox__preview { overflow: hidden; color: var(--fkc-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.fkc-inbox__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--fkc-muted); font-size: 11px; }
.fkc-inbox__note { grid-column: 2 / -1; margin-top: 6px !important; padding: 7px 10px; border-radius: var(--fkc-radius-sm); background: #FFF6E5; color: var(--fkc-text); font-size: 12px; }

.fkc-inbox__status { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.fkc-inbox__status--new { background: var(--fkc-primary-soft); color: var(--fkc-primary-ink); }
.fkc-inbox__status--read, .fkc-inbox__status--replied { background: var(--fkc-fill); color: #46556C; }
.fkc-inbox__status--won { background: var(--fkc-success-soft); color: var(--fkc-success-ink); }
.fkc-inbox__status--spam { background: var(--fkc-accent-soft); color: var(--fkc-accent-ink); }

@media (max-width: 559px) {
	.fkc-inbox__body { grid-template-columns: minmax(0, 1fr); }
	.fkc-inbox__folders { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--fkc-border); }
	.fkc-inbox__folder { gap: 6px; }
	.fkc-inbox__filter { display: none; }
}