/* ==========================================================================
   Quick Mail Inbox — giao diện frontend (form đăng nhập / tạo mail / inbox)
   Màu lấy từ qmi-colors.css (màu chính #0c8fc1). Không viết mã màu trực tiếp ở đây.
   ========================================================================== */

/* ---------- Form đăng nhập / tạo mail ---------- */
.qmi-login-box {
    max-width: 700px;
    margin: 0 auto;
    padding: 25px;
    border: 1px solid var(--qmi-line);
    background: var(--qmi-surface);
    color: var(--qmi-ink);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(var(--qmi-navy-rgb), .07);
    text-align: center;
    font-family: sans-serif;
}
.qmi-login-box h3 { color: var(--qmi-navy); }
.qmi-login-box input[type="email"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid var(--qmi-line-strong);
    border-radius: 5px;
    box-sizing: border-box;
    height: 50px;
    color: var(--qmi-ink);
    background: var(--qmi-surface);
}
.qmi-login-box input[type="email"]:focus { outline: none; border-color: var(--qmi-primary); box-shadow: 0 0 0 3px rgba(var(--qmi-primary-rgb), .18); }
.qmi-login-box button { padding: 10px 20px; cursor: pointer; background: var(--qmi-primary); color: var(--qmi-on-primary); border: none; }
.qmi-btn-login, .qmi-btn-create {
    width: 100%; padding: 12px;
    background: var(--qmi-primary); color: var(--qmi-on-primary);
    border: none; border-radius: 4px; cursor: pointer;
    font-size: 16px; font-weight: bold;
    transition: background .15s;
}
.qmi-btn-login:hover, .qmi-btn-create:hover { background: var(--qmi-primary-dark); }
.qmi-btn-login:focus-visible, .qmi-btn-create:focus-visible { outline: 3px solid rgba(var(--qmi-primary-rgb), .35); outline-offset: 2px; }
.qmi-login-box .note { margin-top: 15px; font-size: .85em; color: var(--qmi-muted); }
.qmi-login-box .note.qmi-note--bad { margin-top: 0; font-size: 1em; color: var(--qmi-bad); }

/* ---------- Thông báo phía trên form ---------- */
.qmi-notice {
    max-width: 700px; margin: 0 auto 15px; padding: 12px 16px;
    background: var(--qmi-warn-soft); border: 1px solid var(--qmi-warn-line); border-left: 4px solid var(--qmi-warn);
    border-radius: 4px; color: var(--qmi-warn-ink);
    font-family: sans-serif; box-sizing: border-box;
}

/* ---------- Inbox ---------- */
.qmi-inbox-container { border: 1px solid var(--qmi-line-strong); background: var(--qmi-surface); color: var(--qmi-ink); min-height: 300px; border-radius: 0 0 10px 10px; }
.qmi-top-bar { background: var(--qmi-primary); color: var(--qmi-on-primary); padding: 7px 20px; display: flex; align-items: center; justify-content: space-between; }
.qmi-actions { display: inline-flex; align-items: center; gap: 10px; }
.qmi-actions button, .qmi-actions a { color: var(--qmi-on-primary); margin-left: 0; cursor: pointer; text-decoration: none; }
.qmi-actions a:hover { text-decoration: underline; }
#qmi-btn-refresh {
    margin-bottom: 0; padding: 6px 14px; border-radius: 5px; cursor: pointer;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .55); color: var(--qmi-on-primary);
    transition: background .15s;
}
#qmi-btn-refresh:hover { background: rgba(255, 255, 255, .30); }

#qmi-message-list-area { padding: 20px; color: var(--qmi-ink); }
.qmi-loading { min-height: 160px; display: flex; align-items: flex-start; justify-content: flex-start; }
.qmi-loading-wrap { display: inline-flex; align-items: center; gap: 10px; color: var(--qmi-muted); font-size: 14px; }
.qmi-spinner { width: 18px; height: 18px; border: 2px solid var(--qmi-line); border-top-color: var(--qmi-primary); border-radius: 50%; animation: qmi-spin 0.8s linear infinite; }
@keyframes qmi-spin { to { transform: rotate(360deg); } }

.qmi-msg-item { border-bottom: 1px solid var(--qmi-line-soft); }
.qmi-msg-head { padding: 10px; cursor: pointer; background: var(--qmi-surface); }
.qmi-msg-head:hover { background: var(--qmi-primary-softer); }
.qmi-msg-body { padding: 15px; background: var(--qmi-bg); border-top: 1px dashed var(--qmi-line); }
.hidden { display: none; }